如何实现登录用户名在所有HTML页面中统一展示

你当前的问题核心是页面内存中的变量无法跨页面/刷新持久化，可以用浏览器自带的 sessionStorage 或 localStorage 实现类session的存储能力，两者区别如下：

• sessionStorage：当前标签页关闭后自动清空，符合你要的session类效果
• localStorage：永久存储，除非用户手动清除浏览器缓存，适合持久化保存注册的用户账号列表

具体修改步骤 #

1. 持久化注册用户列表 #

首先要把你存在数组datas里的用户账号存在localStorage里，避免页面刷新后注册的账号消失。

2. 登录成功后存储当前登录用户名 #

登录验证通过后，把用户名存入sessionStorage，供所有页面读取。

3. 所有公共页面增加用户名读取逻辑 #

每个页面加载时自动读取sessionStorage里的用户名，存在就展示，不存在可以提示未登录或者跳转登录页。

4. 可选：增加退出登录逻辑 #

需要退出时删除sessionStorage里的用户名即可。

修改后的完整代码 #

<script>
// 页面加载时先从localStorage读取已注册的用户列表，没有就初始化空数组
let datas = JSON.parse(localStorage.getItem('userList')) || [];

const addData = (ev) => {
  ev.preventDefault();
  let data = {
    username: document.getElementById('rusername').value,
    password: document.getElementById('rpassword').value
  }
  datas.push(data);
  // 把更新后的用户列表存回localStorage
  localStorage.setItem('userList', JSON.stringify(datas));
  document.forms[0].reset();
  alert('注册成功，可以登录了');
}
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('register_button').addEventListener('click', addData);
  // 页面加载时就读取当前登录用户展示
  showLoginUser();
});

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) {
    // 登录成功，把用户名存入sessionStorage
    sessionStorage.setItem('currentUser', found_user.username);
    showLoginUser();
    // 这里可以加跳转逻辑，比如跳转到首页：location.href = 'index.html'
    alert('登录成功');
  } else {
    alert('用户名或密码错误');
  }
}

// 单独封装展示登录用户的方法
function showLoginUser() {
  const currentUser = sessionStorage.getItem('currentUser');
  if (currentUser) {
    document.getElementsByClassName('loguser')[0].innerHTML = currentUser;
    // 如果是登录/注册页，已经登录的话可以直接跳转到首页
    // if (location.pathname === '/login.html') location.href = 'index.html'
  } else {
    document.getElementsByClassName('loguser')[0].innerHTML = '未登录';
  }
}

// 退出登录方法，需要退出按钮的话绑定这个方法即可
function logout() {
  sessionStorage.removeItem('currentUser');
  showLoginUser();
  // 退出后跳转到登录页
  // location.href = 'login.html'
}

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>

其他页面读取用户名的方法 #

所有需要展示用户名的HTML页面，只需要在JS中加入以下代码即可：

// 页面加载完成后展示用户名
document.addEventListener('DOMContentLoaded', () => {
  const currentUser = sessionStorage.getItem('currentUser');
  if (currentUser) {
    // 替换成你页面上展示用户名的元素选择器
    document.querySelector('.loguser').innerHTML = currentUser;
  } else {
    // 未登录的处理逻辑，比如跳转登录页
    // location.href = 'login.html'
  }
})

注意：该方案仅适合前端练手使用，纯前端存储密码属于极不安全的实现，生产环境必须配合后端服务、数据库加密存储密码，使用服务端session或JWT实现登录状态校验。

内容的提问来源于stack exchange，提问作者Neloy Islam