页面刷新后元素消失了吗？答案

【问题标题】：Element gone after page refresh?页面刷新后元素消失了吗？
【发布时间】：2018-03-15 19:54:18
【问题描述】：

当有人进入网站时，我希望他们看不到某些元素，但是当用户输入 pass 和用户名 admin 时，我希望他显示 newprojection 元素。它可以工作，但是当我刷新页面时它就消失了。我在这里尝试了网络存储，但页面刷新后它仍然消失了。

document.getElementById('newprojection').style.display = "none";
document.getElementById('buyticket').style.display = "none";
document.getElementById('newuser').style.display = "none";

function validate() {
  localStorage.setItem('test', boom);
  var boom = document.getElementById('newprojection').style.display = '';
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  if (username == 'admin' && password == 'admin') {
    localStorage.getItem(test);
  }
}

<header>
  <div class="container">
    <div id="branding">
      <h1><span id="logo">mov</span>BLANK</h1>
    </div>
    <nav>
      <ul>
        <li><a href="../index.html">Home</a></li>
        <li><a id="newprojection" href="newprojection.html">New projection</a></li>
        <li><a id="buyticket" href="buyticket.html">Buy a ticket</a></li>
        <li><a id="newuser" href="newuser.html">New user</a></li>
        <li class="current"><a id="login" href="login.html">Log in</a></li>
        <li>
          <a id="nameofuser" href="#"></a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<div class="container">
  <form>
    <p>Username</p>
    <input id="username" type="text" name="username" required>
    <p>Password</p>
    <input id="password" type="password" name="password" required>
    <a type="submit" id="login2" onclick="validate()">Login</a>
  </form>
</div>

【问题讨论】：

不确定你想在这里实现什么......你想要那个，如果用户输入'admin'/'admin'他们可以看到隐藏的元素，即使他们刷新页面？我的意思是，一旦你“登录”，你就会永远登录（或者至少直到 localStorage 被清空）？
是的，这就是我的意思，我不使用和后端，这只是前端，我想做就像你说的那样，如果他们输入 admin/admin 他们可以看到隐藏的元素以及何时我将页面重定向到 index.html，他们仍然可以看到该元素，但是一旦我刷新或重定向到 index.html，它就不会再次隐藏，并且本地存储应该可以工作但它没有，我的意思是它没有保存在 localstorage如果是的话，即使我刷新页面，它也会显示隐藏的元素。
localStorage.getItem(test); 只是检索值。您必须对检索到的值做某事。（此外，您还试图在定义 boom 之前将其设置为空字符串...）
附带说明，这种事情根本不安全，任何加载页面的人都可以查看源代码并找出用户名/密码是什么。它会阻止那些技术文盲或懒惰的人，但任何想要并拥有一盎司技术技能的人都可以看到他们。
是的，我知道，我现在不知道php或node，但我会学习它，现在它只是一个大学项目，谢谢你的建议：D

标签： javascript html web-storage

【解决方案1】：

嗯，你可以试试这个。它不能作为 sn-p 工作，因为调用 localStorage 方法会在我的 firefox 中导致 SecurityException。

document.getElementById('newprojection').style.display = "none";	
document.getElementById('buyticket').style.display = "none";
document.getElementById('newuser').style.display = "none";

function validate(){
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;
	if ( username == 'admin' && password == 'admin'){
    document.getElementById('newprojection').style.display = '';
		localStorage.setItem('isAdmin', 'true');
	}
}

window.onload = function() {
  var isAdmin = localStorage.getItem('isAdmin');
  if (isAdmin === 'true') {
    document.getElementById('newprojection').style.display = '';
  }
};

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
	<title>movBLANK | Log in</title>
</head>
<body>

<header>
	<div class="container">
		<div id="branding">
			<h1><span id="logo">mov</span>BLANK</h1>
		</div>
		<nav>
			<ul>
				<li><a href="../index.html">Home</a></li>
				<li><a id="newprojection" href="newprojection.html">New projection</a></li>
				<li><a id="buyticket" href="buyticket.html">Buy a ticket</a></li>
				<li><a id="newuser" href="newuser.html">New user</a></li>
				<li class="current"><a id="login" href="login.html">Log in</a></li>
				<li><a id="nameofuser" href="#"></a></li>
			</ul>
		</nav>
	</div>
</header>

<div class="container">
	<form>
		<p>Username</p>
        <input id="username" type="text" name="username" required>
        <p>Password</p>
        <input id="password" type="password" name="password" required>
        <a type="submit" id="login2" onclick="validate()">Login</a>
	</form>
</div>

<script src="../js/login.js" type="text/javascript"></script>
</body>
</html>

如您所见，validate 函数仅在用户和密码为 'admin'/'admin' 而不是之前显示元素。如果这是真的，那么在 localStorage 中设置 store 和 isAdmin 属性。在页面加载时，我们会检查该属性是否存在，如果它确实存在并且为“真”，那么我们会再次显示隐藏的元素，而无需再次填写表单。

不过，让我告诉你，这种“保护”应用程序的方式是错误的。任何人都可以检查您的代码并知道如何绕过您的“安全性”。无论如何，如果他们想显示隐藏的项目，他们可以通过浏览器的开发者工具来实现。

【讨论】：

请先生，我复制了您的代码，它显示了新的投影，我不想显示新的投影，我希望隐藏这 3 个元素，并且当用户键入 admin/admin 时，新的投影显示 AND当我刷新仍然显示新投影的页面时...我知道这个项目仅适用于学校所以不用担心 xD...
我进行了更改。立即尝试
先生，我再次复制，当我输入 index.html 时，新的投影仍在显示，我希望只显示主页和登录，当我在登录表单中输入 admin/admin然后我想显示新的投影，即使我刷新页面也能保持显示。（
我检查了它，它按预期工作：当你第一次打开页面时，三个元素被隐藏了。然后，当您输入凭据时，会出现新的投影，并且在您刷新时它会一直出现，您是否已“登录”。正如我在第一条评论中警告您的那样，一旦您登录，您将永远登录，即使您关闭浏览器并再次打开它也是如此。也许您只希望用户在当前会话期间被记录（直到他们关闭浏览器）？在这种情况下，您应该使用sessionStorage 而不是localStorage。
谢谢您，先生，您是我的救星，现在我将逐字检查您的代码字母以更好地理解它，感谢您的反馈和帮助，它按预期工作：D