如何在HTML页面中显示已登录用户的用户名？

我正尝试在main.html文件中打印当前登录用户的用户名，使用的login.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form Validation</title>
    <link rel="stylesheet" href="login.css">
    <script defer src="login.js"></script>
</head>
<body>
    <main id="main-holder">
        <h1 id="login-header">Login</h1>
        
        <div id="login-error-msg-holder">
          <p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>
        </div>
        
        <form id="login-form">
          <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username">
          <input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password">
          <input type="submit" value="Login" id="login-form-submit">
        </form>
      </main> 
    
</body>
</html>

对应的login.js代码：

const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-form-submit");
const loginErrorMsg = document.getElementById("login-error-msg");


loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    const username = loginForm.username.value;
    const password = loginForm.password.value;

    if (username === "Erkki_Esimerkki" && password === "projekti") {
        window.location.href = "main.html";
       /* location.reload();*/
    } else {
        loginErrorMsg.style.opacity = 1;
    }
})

我需要在用户登录跳转至的main.html的p元素中显示用户名，曾尝试在login.html中编写如下函数并在main.js中调用，但未实现需求：

function getUsername() {
    let username = document.getElementById("username-field").value
    document.getElementById("userinfo").innerHTML += username
}

你之前的方法失效是因为跳转到main.html后，login.html的DOM元素已经被销毁，无法再获取输入框里的内容。可以通过localStorage临时存储用户名，实现跨页面传递，具体步骤如下：

1. 修改login.js的登录逻辑 #

在登录成功时，把用户名存入localStorage：

const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-form-submit");
const loginErrorMsg = document.getElementById("login-error-msg");

loginButton.addEventListener("click", (e) => {
    e.preventDefault();
    const username = loginForm.username.value;
    const password = loginForm.password.value;

    if (username === "Erkki_Esimerkki" && password === "projekti") {
        // 将用户名存入localStorage
        localStorage.setItem("currentUser", username);
        window.location.href = "main.html";
    } else {
        loginErrorMsg.style.opacity = 1;
    }
})

2. 配置main.html的结构 #

确保main.html中存在用于显示用户名的p元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Page</title>
    <script defer src="main.js"></script>
</head>
<body>
    <h1>欢迎回来</h1>
    <!-- 用于展示用户名的元素 -->
    <p id="userinfo">当前用户：</p>
</body>
</html>

3. 编写main.js读取并显示用户名 #

在main.html加载完成后，从localStorage读取用户名并插入到指定元素中：

// 页面加载完成后执行
window.addEventListener("load", () => {
    // 获取存储的用户名
    const currentUser = localStorage.getItem("currentUser");
    const userInfoElement = document.getElementById("userinfo");
    
    // 确保元素存在且用户名不为空
    if (currentUser && userInfoElement) {
        userInfoElement.innerHTML += currentUser;
    }
})

补充说明 #

• localStorage存储的数据会长期保留在浏览器中，若需要清除可调用localStorage.removeItem("currentUser")
• 若希望数据在浏览器关闭后自动清除，可替换为sessionStorage，用法与localStorage完全一致

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