如何从localStorage存储的数组中提取指定键值实现登录校验

你的代码有3个核心错误，导致校验永远不通过：

• localStorage.getItem() 仅接收1个参数（存储项的键名），传入第二个参数不会生效。你存储的UserData是数组结构，两次调用getItem('UserData')解析后得到的都是完整数组，直接拿数组和输入的字符串做相等判断，结果永远为false，所以一直输出ne。
• 注册页DOM选择器和HTML不匹配：注册表单的class是join-form，你代码里用.signup作为选择器选输入框，也没有提前定义signupForm变量就绑定提交事件，注册逻辑本身就无法正常执行，存到localStorage的内容从一开始就是异常的。
• 全局定义的userLogin数组不会自动清空，每次注册新账号都会往同一个数组追加内容，且每次存储都会直接覆盖之前的UserData，无法支持多用户注册场景。

直接存储完整的用户信息数组即可，不需要单独拆分仅含用户名密码的数组，登录时遍历用户列表做匹配，逻辑更清晰也支持多账号：

注册页JS代码 #

// 注册页逻辑
const signupForm = document.querySelector(".join-form");
let users = [];

// 初始化时读取本地已存的用户数据，避免覆盖历史注册记录
if (localStorage.getItem("UserData")) {
  users = JSON.parse(localStorage.getItem("UserData"));
}

signupForm.addEventListener("submit", (e) => {
  e.preventDefault();
  // 修正选择器，匹配注册表单下的所有输入框
  const user = Object.fromEntries(
    [...document.querySelectorAll(".join-form ul input")].map(input => [input.name, input.value.trim()])
  );
  users.push(user);
  localStorage.setItem("UserData", JSON.stringify(users));
  console.log("注册完成", localStorage);
});

登录页JS代码 #

// 登录页逻辑
const loginForm = document.querySelector(".login-form");

loginForm.addEventListener("submit", (e) => {
  e.preventDefault();
  const usernameInput = document.querySelector(".lg-username").value.trim();
  const passwordInput = document.querySelector(".lg-password").value.trim();

  const storedData = localStorage.getItem("UserData");
  if (!storedData) {
    console.log("not regis");
    return;
  }

  const userList = JSON.parse(storedData);
  // 校验是否存在用户名密码完全匹配的用户
  const loginSuccess = userList.some(user => user.username === usernameInput && user.password === passwordInput);
  
  if (loginSuccess) {
    console.log("ye");
    // 此处可添加登录成功后的跳转、状态存储逻辑
  } else {
    console.log("ne");
  }
});

• 如果确实需要单独存储登录凭据，建议用对象结构存储，不要用位置固定的数组：存储时传JSON.stringify({username: xxx, password: xxx})，读取时一次性解析完整个对象，再分别取属性值即可，不要重复调用getItem。
• 上述写法仅适用于本地演示场景，正式环境禁止明文存储用户密码，必须做加盐哈希处理。
• DOM选择器必须和HTML中定义的class、id属性完全一致，否则会拿到空节点导致逻辑失效。

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