如何实现localStorage用户信息独立存储及重复提交校验？

原代码的核心问题 #

1. 逻辑顺序颠倒：先把新用户存入数组，再做重复校验，导致重复数据已经被写入localStorage
2. 校验逻辑错误：loggeduser是整个用户数组，直接拿values.email和loggeduser.email对比完全不成立（数组没有email属性），所以提示永远不会触发

修正后的实现代码 #

function handleSubmit(e) {
  e.preventDefault();
  
  // 1. 从localStorage读取已存储的用户数组，不存在则初始化空数组
  const existingUsers = JSON.parse(localStorage.getItem("users") || "[]");
  
  // 2. 检查当前输入的用户是否已存在（这里以email作为唯一标识，也可以改成email+password组合校验）
  const isUserExists = existingUsers.some(user => {
    return user.email === values.email;
    // 如果需要校验邮箱+密码都重复才提示，改成：
    // return user.email === values.email && user.password === values.password;
  });
  
  if (isUserExists) {
    // 3. 已存在则弹出提示，终止后续操作
    alert("该用户信息已存在！");
    return;
  }
  
  // 4. 不存在则将新用户加入数组，存回localStorage
  existingUsers.push(values);
  localStorage.setItem("users", JSON.stringify(existingUsers));
  
  // 5. 跳转至首页
  navigate("/");
}

关键逻辑说明 #

• 先校验后存储：确保重复数据不会被写入localStorage
• 使用Array.some()校验重复：遍历用户数组，只要找到匹配的用户就返回true，高效判断重复
• 独立存储的实现：每个用户对象作为数组的独立元素存储，既保留了独立的用户信息，又方便统一管理和查询

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