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

Question

当有人进入网站时，我希望他们看不到某些元素，但是当用户输入密码和用户名 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>

Answer 1

嗯，你可以试试这个。它不能用作代码片段，因为调用 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' 时显示该元素，而不是之前的元素。如果这是真的，那么 se store 和 isAdmin 属性在 localStorage 中。在页面加载时，我们检查属性是否存在，如果它确实存在并且是 'true'，那么我们将再次显示隐藏的元素，而无需再次填写表单。

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

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

Element gone after page refresh?

html

javascript

web-storage