Question

我正在建立一个网站，在加载该网站时，除密码框外，所有其他元素都被隐藏。当用户输入正确的密码时，代码将显示网页上的所有元素。我想确定用户重新加载时的位置，确认用户已经输入了正确的密码后，这些元素将保持显示状态。下面是我尝试创建一个存储用户信息的cookie，然后使用该cookie来确保用户重新加载时页面不会再次隐藏元素。

提前谢谢！

<html>
<style>
h2 {
font-size: 50px;
color: green;
}
</style>

<body>
<div class="wsite-passwordBox">
<h1 id="header">Enter your name and the password</h1>
<input name="username" id ="username" onkeypress="return runScript(event)"></input>
<input type="password" name="password" id="password" onkeypress="return runScript(event)"></input>
<button id="button1">Enter</button>
<h2 id="smallHeader"></h2>
</div>
</body>

<script>
window.onload = function myFunction() {
var youtube = document.getElementsByClassName("wsite-youtube");
for (var i = 0; i < youtube.length; i ++) {
    youtube[i].style.display = "none";
}
var paragraph = document.getElementsByClassName("paragraph");
for (var i = 0; i < paragraph.length; i ++) {
    paragraph[i].style.display = "none";
}
var title = document.getElementsByClassName("wsite-content-title");
for (var i = 0; i < title.length; i++) {
    title[i].style.display = "none";
}
var spacer = document.getElementsByClassName("wsite-spacer");
for (var i = 0; i < spacer.length; i++) {
    spacer[i].style.display = "none";
}
var slideshow = document.getElementsByClassName("wslide");
for (var i = 0; i < slideshow.length; i++) {
    slideshow[i].style.display = "none";
}
var buttons = document.getElementsByClassName("wsite-multicol");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].style.display = "none";
}
var form = document.getElementsByClassName("wsite-form-container");
for (var i = 0; i < form.length; i++) {
    form[i].style.display = "none";
}
var anotherButton = document.getElementsByClassName("wsite-button");
for (var i = 0; i < anotherButton.length; i++) {
    anotherButton[i].style.display = "none";
}
}

function testFunction() {
 
var password = document.getElementById("password").value;
        if (password == "test") {
checkCookie();
        var youtube = document.getElementsByClassName("wsite-youtube");
for (var i = 0; i < youtube.length; i ++) {
    youtube[i].style.display = "block";
}
var paragraph = document.getElementsByClassName("paragraph");
for (var i = 0; i < paragraph.length; i ++) {
    paragraph[i].style.display = "block";
}
var title = document.getElementsByClassName("wsite-content-title");
for (var i = 0; i < title.length; i++) {
    title[i].style.display = "block";
}
var spacer = document.getElementsByClassName("wsite-spacer");
for (var i = 0; i < spacer.length; i++) {
    spacer[i].style.display = "block";
}
var slideshow = document.getElementsByClassName("wslide");
for (var i = 0; i < slideshow.length; i++) {
    slideshow[i].style.display = "block";
}
var buttons = document.getElementsByClassName("wsite-multicol");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].style.display = "block";
}
var form = document.getElementsByClassName("wsite-form-container");
for (var i = 0; i < form.length; i++) {
    form[i].style.display = "block";
}
var anotherButton = document.getElementsByClassName("wsite-button");
for (var i = 0; i < anotherButton.length; i++) {
    anotherButton[i].style.display = "block";
}
var passwordInputThing = document.getElementsByClassName("wsite-passwordBox") 
for (var i = 0; i < passwordInputThing.length; i++) {
    passwordInputThing[i].style.display = "none";
}
}
else {
document.getElementById("smallHeader").textContent = "Wrong password. Please try again.";
}
}
document.getElementById("button1").onclick = testFunction;
function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        testFunction();
    }
}




***function setCookie(cname,cvalue,exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
function checkCookie() {
  var user = document.getElementById("username").value;
  if (user != "") {
    alert("Welcome, " + user);
  } else {
     user = prompt("Please enter your name:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}***
</script>
</html>

Answer 1

不确定我是否完全了解您正在构建哪种类型的网站。由于密码在源代码中用硬编码清楚地标出，因此距攻击者一键之遥。

无论如何，我建议您使用localStorage（disputils）而不是cookie来存储持久性客户端数据，因为它更易于操作。（因为cookie比localStorage早得多，所以请确保支持您定位的浏览器。

localStorage使用字符串作为键和值。使用localStorage.getItem检索值（如果未定义该值，则返回null），并使用localStorage.setItem设置值。

您可以使用

localStorage.setItem("user", document.getElementById("username").value);

要保存用户名，并且

localStorage.getItem("user");

检索以前保存的用户名。

类似地，您可以使用它来保留用户输入正确密码的事实

localStorage.setItem("authenticated", "true");

然后在您的onload函数中检查用户先前输入的密码是否正确：

if(localStorage.getItem("authenticated")===null) {
  // user is not authenticated
} else {
  // user is authenticated
}

最后，如果您需要删除某个值（例如，清除已验证的身份）：

localStorage.removeItem("authenticated");

如何使用JavaScript维护会话？

1 个答案: