Question

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

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

嗯，你可以试试这个。它不能作为一个片段工作，因为调用localStorage方法会导致我的firefox中出现SecurityException。

＆＃13;

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 = '';
  }
};

＆＃13;

<!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>

＆＃13;

如您所见，validate功能仅在用户和密码为＆＃39; admin＆＃39; admin＆＃39;而不是之前。如果这是真的，那么在localStorage中存储和isAdmin属性。在页面加载时，我们检查该属性是否存在，如果它存在并且是真实的，则我们再次显示隐藏的元素而无需再次填充该表单。

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

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

1 个答案: