如何用JavaScript存储多组用户名密码实现本地注册登录功能

你原来的代码是每次直接覆盖localStorage里的单条账号密码记录，改成存储结构化的用户数组即可实现多组数据存储，完整实现逻辑如下：

注册存储逻辑改造 #

// 注册时存储新用户信息
const store_data = () => {
  // 获取输入的账号密码并做基础非空校验
  const inputUsername = document.getElementById("username").value.trim();
  const inputPassword = document.getElementById("password").value.trim();
  if (!inputUsername || !inputPassword) {
    alert("账号和密码不能为空");
    return;
  }

  // 读取本地已存储的用户列表，无数据时初始化为空数组
  const savedUserList = JSON.parse(localStorage.getItem("userList") || "[]");

  // 校验用户名是否重复
  const isUsernameExists = savedUserList.some(user => user.username === inputUsername);
  if (isUsernameExists) {
    alert("该用户名已被注册，请更换");
    return;
  }

  // 新用户信息加入列表后序列化存回localStorage
  savedUserList.push({
    username: inputUsername,
    password: inputPassword
  });
  localStorage.setItem("userList", JSON.stringify(savedUserList));
  alert("注册成功");
}

登录校验逻辑 #

// 登录时校验账号密码是否匹配
const checkLogin = () => {
  const loginUsername = document.getElementById("login-username").value.trim();
  const loginPassword = document.getElementById("login-password").value.trim();

  const savedUserList = JSON.parse(localStorage.getItem("userList") || "[]");
  // 匹配账号密码完全一致的用户
  const validUser = savedUserList.find(user => 
    user.username === loginUsername && user.password === loginPassword
  );

  if (validUser) {
    alert("登录成功");
    // 可在此处添加登录后的跳转、状态记录等逻辑
  } else {
    alert("账号或密码错误，请重新输入");
  }
}

优先选择localStorage，和cookie相比优势如下：

• 存储容量更大：localStorage默认容量为5MB，远大于cookie的4KB上限，足够存储大量用户账号信息
• 无额外开销：cookie是为客户端与服务端通信设计的，会自动跟随所有同域请求发送给服务端，纯本地使用没有任何价值还会增加不必要的逻辑复杂度
• 存储时效更可控：localStorage默认永久存储，只要用户不主动清理浏览器缓存数据就不会丢失，cookie默认会话级失效，需要长期存储还要手动配置过期时间，操作更繁琐

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