使用localStorage实现基础注册登录功能异常，请求技术排查

核心问题1：DOM元素内容未更新 #

你的代码中修改了text变量的值，但没有将新值同步回对应的DOM元素，导致页面无法显示操作提示。比如：

• 在saved()函数里，仅执行了text = "saved"，但未把值赋值给textSave元素的innerHTML
• 在loaded()函数中同理，修改text后没有更新textLoad的内容

修复后的saved()函数：

function saved() {
    let username = document.getElementById("userSave").value;
    let password = document.getElementById("passSave").value;

    localStorage.setItem(username, password);
    // 直接更新DOM元素内容
    document.getElementById("textSave").innerHTML = "saved";
}

修复后的loaded()函数：

function loaded() {
    let username = document.getElementById("userLoad").value;
    let password = document.getElementById("passLoad").value;
    let resultElement = document.getElementById("textLoad");

    if (localStorage.getItem(username) === password) {
        resultElement.innerHTML = "welcome";
    } else {
        resultElement.innerHTML = "login failed";
    }
}

核心问题2：功能模块标题混淆 #

页面标题与实际功能不匹配，会导致用户操作混淆：

• 标注为login的模块实际是注册（save）功能
• 标注为sign up的模块实际是登录（load）功能
  建议修正标题：

<!-- 注册模块 -->
<h1>Sign Up</h1>
<h2>username</h2>
<input id="userSave">
<h2>password</h2>
<input id="passSave">
<button onclick="saved()">save</button>
<h2 id="textSave"></h2>

<!-- 登录模块 -->
<h1>Login</h1>
<h2>username</h2>
<input id="userLoad">
<h2>password</h2>
<input id="passLoad">
<button onclick="loaded()">load</button>
<h2 id="textLoad"></h2>

额外优化建议 #

• 密码输入框添加type="password"属性，隐藏输入内容：<input id="passSave" type="password">
• 增加空值校验，避免用户输入空用户名/密码就执行操作：

function saved() {
    let username = document.getElementById("userSave").value.trim();
    let password = document.getElementById("passSave").value.trim();
    let resultElement = document.getElementById("textSave");

    if (!username || !password) {
        resultElement.innerHTML = "请输入用户名和密码";
        return;
    }

    localStorage.setItem(username, password);
    resultElement.innerHTML = "saved";
}

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