如何自动创建多条localStorage条目并校验登录邮箱是否匹配存储记录

你当前采用递增序号拼接key的方式存储多邮箱，注意：原有注册逻辑存在两个明显问题，需要先修复否则功能无法正常运行：

• 计数器x是内存变量，页面刷新后会重置为0，会直接覆盖历史存储的邮箱记录，需要把计数器也持久化到localStorage
• 函数声明语法错误，addMail后缺少执行括号

修正后的注册逻辑代码如下：

// 初始化计数器，优先从localStorage读取已存的计数，无历史记录则初始为0
let x = Number(localStorage.getItem('emailCount') || 0);

function addMail() {
  const usrInput = document.getElementById("userEmail").value.trim();
  if (!usrInput) return alert('请输入邮箱');
  x += 1;
  localStorage.setItem(`email${x}`, usrInput);
  // 持久化最新计数器值
  localStorage.setItem('emailCount', x);
}

登录邮箱校验实现 #

按照你当前email+序号的key命名规则，校验时只需遍历所有localStorage条目，筛选所有存邮箱的key，将对应存储值和用户输入做全等比对即可：

function validateEmail() {
  // 登录输入框id为usrEmail，和注册页的userEmail做了区分
  const inputEmail = document.getElementById("usrEmail").value.trim();
  if (!inputEmail) return alert('请输入邮箱');

  let isRegistered = false;
  // 遍历localStorage所有存储项
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    // 排除计数器的key，只匹配邮箱存储项
    if (key.startsWith('email') && key !== 'emailCount') {
      const storedEmail = localStorage.getItem(key);
      if (storedEmail === inputEmail) {
        isRegistered = true;
        break;
      }
    }
  }

  if (isRegistered) {
    alert('邮箱校验通过，可继续执行后续登录逻辑');
    // 在此处添加密码校验、页面跳转、登录态存储等逻辑
  } else {
    alert('当前邮箱未注册，请先完成注册');
  }

  return isRegistered;
}

更易维护的存储方案推荐 #

如果后续需要扩展存储密码、用户昵称、注册时间等更多信息，不建议用分散的独立key存储单条邮箱，更合理的方式是将所有用户数据存在一个数组中，序列化后存入单个key，不需要维护额外计数器，遍历和扩展都更方便：

// 优化版注册逻辑
function addMail() {
  const usrInput = document.getElementById("userEmail").value.trim();
  if (!usrInput) return alert('请输入邮箱');
  // 读取已存用户列表，无数据则初始为空数组
  const userList = JSON.parse(localStorage.getItem('userList') || '[]');
  // 注册前提前校验邮箱重复
  if (userList.some(item => item.email === usrInput)) return alert('该邮箱已注册');
  // 支持扩展更多字段，比如密码
  userList.push({
    email: usrInput,
    // password: 接收的密码输入值
  });
  localStorage.setItem('userList', JSON.stringify(userList));
}

// 优化版校验逻辑
function validateEmail() {
  const inputEmail = document.getElementById("usrEmail").value.trim();
  if (!inputEmail) return alert('请输入邮箱');
  const userList = JSON.parse(localStorage.getItem('userList') || '[]');
  const matchedUser = userList.find(item => item.email === inputEmail);
  
  if (matchedUser) {
    alert('邮箱校验通过，可继续校验密码');
    // 后续可直接取matchedUser做密码比对
  } else {
    alert('当前邮箱未注册，请先完成注册');
  }

  return !!matchedUser;
}

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