Question

我将用户名和密码存储在一个数组（数据）中，然后注册并登录后，我只能让用户名出现在登录页面中.. 如何让用户名出现在所有我的 html 页面？喜欢将它存储在会话变量中，这样我就可以在所有其他页面中使用用户名。谢谢！

<script>
let datas = [];
const addData = (ev) => {
  ev.preventDefault();
  let data = {
    username: document.getElementById('rusername').value,
    password: document.getElementById('rpassword').value
  }
  datas.push(data);
  document.forms[0].reset();
}
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('register_button').addEventListener('click', addData);
});

function isUserValid(e) {
  e.preventDefault();
  var username = document.getElementById('lusername').value;
  var password = document.getElementById('lpassword').value;
  var found_user = datas.find(d => d.username === username && d.password === password);
  if (found_user) {
    document.getElementsByClassName('loguser')[0].innerHTML = found_user.username;
  }
}

document.getElementById("login_button").addEventListener("click", isUserValid);
</script>
<body>
  <div class="loguser">
    User
  </div>

  <div class="wrapper">

    <div class="login_box">
      <div class="login_header">
        <img src="images/alimama.png" alt=""> <br> Login or Register!
      </div>

      <div id="login">
        <form action="" method="POST">
          <input id="lusername" type="text" name="lusername" placeholder="Username" required>
          <br>
          <input id="lpassword" type="password" name="lpassword" placeholder="Password">
          <br>
          <input type="submit" id="login_button" name="login_button" value="Login">
          <br>
          <a href="#" id="signup" class="signup">Need an account? Register here!</a>
        </form>
      </div>

      <div id="register">
        <form action="" method="POST">
          <input id="rusername" type="text" name="rusername" placeholder="Username" required>
          <br>
          <input id="rpassword" type="password" name="rpassword" placeholder="Password" required>
          <br>
          <input id="register_button" type="submit" name="register_button" value="Register">
          <br>
          <a href="#" id="signin" class="signin">Already have an account? Sign in here!</a>
        </form>
      </div>
    </div>


</body>

Answer 1

您可以使用浏览器的 localstorage 来存储值并在其他页面上检索它们。另一种选择是使用 cookies，但我相信这会稍微复杂一些。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

这是更多讨论的文档。我认为这会帮助你 =)

重要的一点是，这将保存在用户的浏览器中，如果您需要这些数据，我建议使用数据库

Answer 2

使用localStorage，真的很简单。要设置该值，请使用：

window.localStorage.setItem('actualUserName', document.getElementById('lusername').value);

并检索值使用此：

window.localStorage.getItem('actualUserName');

更多信息：https://developer.mozilla.org/es/docs/Web/API/Window/localStorage

如何让我的输入值出现在我所有的 html 页面中？

2 个答案: