JavaScript结合localStorage实现登录注册表单的本地数据读取问题

现有代码逻辑说明 #

当前注册逻辑是将单个用户数据以用户名为key存入localStorage，实现登录需要完成「获取输入值→匹配账号→校验密码→反馈结果」四个步骤，另外现有代码存在三处可优化点：

• 登录表单输入框无唯一标识，不方便快速取值
• 单用户单key的存储方式不利于多用户管理，遍历效率低
• 注册函数使用全局event对象不符合规范，且缺少重复注册校验

具体实现步骤 #

1. 补全登录表单元素标识 #

给登录表单的输入框、错误提示节点加上id，方便后续JS取值，修改对应HTML片段：

<form class="form" id="login">
    <h1 class="form-title">Login</h1>
    <!-- 错误提示加id -->
    <div class="form-message form-message--error" id="loginError"></div>
    <div class="form-input-group">
        <!-- 账号输入框加id -->
        <input type="text" class="form-input usernm" id="loginAccount" autofocus placeholder="Username or email">
        <div class="form-input-error-message"></div>
    </div>

    <div class="form-input-group">
        <!-- 密码输入框加id -->
        <input type="password" class="form-input pass" id="loginPassword" autofocus placeholder="Password">
        <div class="form-input-error-message"></div>
    </div>

    <button class="form-button" type="submit">Continue</button>
    <p class="form-text">
        <a href="#" class="form-link">Forgot your password?</a>
    </p>
    <p class="form-text">
        <a class="form-link" href="./" id="linkCreateAccount">Don't have an account? Create account</a>
    </p>
</form>

同时把注册表单的内联提交事件去掉，改成和登录表单统一的事件绑定，删除form标签上的onsubmit="signup()"属性即可。

2. 优化注册+登录逻辑 #

将所有用户统一存在userList字段下，存储为数组格式方便查询，同时补全登录校验逻辑，完整JS代码如下：

document.addEventListener("DOMContentLoaded", () => {
  const loginForm = document.querySelector("#login");
  const createAccountForm = document.querySelector("#createAccount");
  const signupForm = document.querySelector("#createAccount");

  // 原有表单切换逻辑保留
  document.querySelector("#linkCreateAccount").addEventListener("click", e => {
    e.preventDefault();
    loginForm.classList.add("form--hidden");
    createAccountForm.classList.remove("form--hidden");
  });

  document.querySelector("#linkLogin").addEventListener("click", e => {
    e.preventDefault();
    loginForm.classList.remove("form--hidden");
    createAccountForm.classList.add("form--hidden");
  });

  // 注册逻辑
  signupForm.addEventListener("submit", e => {
    e.preventDefault();
    const email = document.getElementById("email").value.trim();
    const username = document.getElementById("username").value.trim();
    const password = document.getElementById("password").value.trim();

    // 读取已存的用户列表，无数据则初始化为空数组
    const userList = JSON.parse(localStorage.getItem("userList")) || [];
    // 校验用户名/邮箱是否已注册
    const isRegistered = userList.some(user => user.username === username || user.email === email);
    if (isRegistered) {
      alert("用户名或邮箱已被注册");
      return;
    }
    // 追加新用户
    userList.push({email, username, password});
    localStorage.setItem("userList", JSON.stringify(userList));
    alert("注册成功，请登录");
    // 切换到登录表单
    createAccountForm.classList.add("form--hidden");
    loginForm.classList.remove("form--hidden");
    // 清空注册表单输入
    signupForm.reset();
  })

  // 登录逻辑
  loginForm.addEventListener("submit", e => {
    e.preventDefault();
    const inputAccount = document.getElementById("loginAccount").value.trim();
    const inputPwd = document.getElementById("loginPassword").value.trim();
    const errorEl = document.getElementById("loginError");
    // 清空历史错误提示
    errorEl.textContent = "";

    // 读取所有用户数据
    const userList = JSON.parse(localStorage.getItem("userList")) || [];
    // 匹配对应用户名/邮箱的账号
    const targetUser = userList.find(user => user.username === inputAccount || user.email === inputAccount);

    if (!targetUser) {
      errorEl.textContent = "账号不存在，请先注册";
      return;
    }
    if (targetUser.password !== inputPwd) {
      errorEl.textContent = "密码错误，请重新输入";
      return;
    }
    // 登录成功，存储当前登录状态
    localStorage.setItem("currentLoginUser", JSON.stringify(targetUser));
    alert("登录成功");
    // 此处可添加登录成功后的跳转、页面渲染逻辑
    // window.location.href = "/user-center.html"
  });
});

安全提示：该方案仅适合前端入门练习使用，localStorage存储明文密码安全性极低，正式生产环境必须通过后端接口完成鉴权，密码需做非对称加密传输、哈希加盐存储。

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