登录页面跳转后如何保存用户名以实现个性化欢迎提示？

现有代码的核心问题 #

1. 登录成功后未对用户名进行持久化存储，导致跳转至index.html后无法获取该值
2. message函数中window.history='Login.html'是赋值操作而非判断，逻辑完全错误
3. name变量仅存在于登录按钮的点击回调作用域内，message函数无法访问

解决方案1：用 localStorage/sessionStorage 持久化存储 #

适合需要保留登录状态的场景：勾选「Remember me」时用localStorage（关闭浏览器后仍保留），否则用sessionStorage（页面关闭即清除）

1. 修改登录页面的JavaScript代码 #

// 先获取DOM元素，避免未声明变量的问题
const loginForm = document.getElementById('login-form');
const loginErrorMsg = document.getElementById('login-error-msg');
const rememberMe = document.getElementById('flexCheckDefault');

window.onload = function() {
  loginForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const name = loginForm.name.value;
    const password = loginForm.password.value;

    if (name === "user123" && password === "1") {
      // 根据「记住我」选项选择存储方式
      if (rememberMe.checked) {
        localStorage.setItem('loggedInUser', name);
      } else {
        sessionStorage.setItem('loggedInUser', name);
      }
      window.location.href = 'index.html';
    } else {
      loginErrorMsg.style.opacity = 1;
    }
  });
}

2. 在index.html中添加显示逻辑 #

在index.html的script标签中加入以下代码：

window.onload = function() {
  const navLogin = document.getElementById('navlogin');
  // 优先从localStorage读取，没有则取sessionStorage
  const userName = localStorage.getItem('loggedInUser') || sessionStorage.getItem('loggedInUser');
  
  if (userName) {
    navLogin.innerHTML = `欢迎回来 ${userName}!`;
  } else {
    navLogin.innerHTML = '';
  }
}

解决方案2：用URL参数临时传递（无需持久化） #

如果仅需要跳转时临时传递用户名，不需要保留登录状态，可以用URL参数：

1. 修改登录页面的跳转代码 #

// 登录成功时拼接用户名到URL
window.location.href = `index.html?username=${encodeURIComponent(name)}`;

2. 在index.html中获取URL参数 #

window.onload = function() {
  const navLogin = document.getElementById('navlogin');
  // 解析URL参数
  const urlParams = new URLSearchParams(window.location.search);
  const userName = urlParams.get('username');
  
  if (userName) {
    navLogin.innerHTML = `欢迎回来 ${decodeURIComponent(userName)}!`;
  } else {
    navLogin.innerHTML = '';
  }
}

额外修正：HTML代码的小问题 #

你的登录表单中存在重复id（比如<input>同时有floatingInput和name-field），需要删除重复的id，避免DOM选择异常。

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