我将如何维护与 JavaScript 的会话？答案

【问题标题】：How would I maintain a session with JavaScript?我将如何维护与 JavaScript 的会话？
【发布时间】：2020-11-17 07:41:03
【问题描述】：

我正在制作一个网站，在加载时，除了密码框外，所有元素都被隐藏。当用户输入正确的密码时，代码会显示网页上的所有元素。我想让它在用户重新加载时，在识别出用户已经输入正确的密码后，元素保持显示状态。下面是我尝试创建一个存储用户信息的 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>

【问题讨论】：

这能回答你的问题吗？ Session handling in HTML page using JavaScript
欢迎来到 StackOverflow。这不是你问的，但毫无疑问人们会提到它。如果您这样做是为了隐藏秘密信息，那么它远非安全，因为人们可以查看源代码并操纵 JavaScript 以启用一切。只是想确保你知道。
@HazardousGlitch 是的，我知道，谢谢。当谈到 HTML/CSS 和保持加密时，我有点菜鸟（我更喜欢在 Unity 等环境中工作），而且我不确定如何以其他方式做到这一点。在互联网上查找东西会产生很多不同的答案，所以我决定这样做。不过，感谢您指出这一点。
@Md.Amirozzaman 确实如此。我相信它与我的代码底部附近的 cookie 函数非常相似。我只是不确定如何将其用于存储用户输入密码的位置，因此当页面加载时，网站应该识别出用户之前曾到过那里并输入密码，然后显示元素给他们。

标签： javascript php html cookies session-cookies

【解决方案1】：

不确定我是否完全理解您正在构建的网站类型。由于密码在源代码中以明文形式硬编码，攻击者只需点击一下即可。

无论如何，我建议您使用 localStorage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 而不是 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");

【讨论】：

作为旁注，我强烈建议您使用 === 和 !== 进行等式/不等式比较，因为 == 和 != 会显示一些带有奇怪类型转换的相当“意外”的行为取决于您要比较的值。