登录功能检查localStorage内用户数组匹配失败如何修复

核心问题根因 #

• Array.includes() 对对象这类引用类型做比对时，判断的是内存地址是否相同，你登录时新创建的user对象和从本地存储解析出来的用户数组里的对象是完全独立的两个引用，永远会返回false
• 注册时存入本地存储的用户对象字段为registerUsername、registerPassword，登录时构造的用户对象字段为username、password，字段名不匹配，就算做值比对也无法对应上
• 额外边界问题：如果本地存储还没有任何注册用户数据时，JSON.parse(localStorage.getItem("registred users"))会返回null，直接调用数组方法会抛出异常

修复代码 #

方案1：直接修改登录校验逻辑（兼容现有存储的用户数据） #

把登录按钮的事件监听代码替换为以下内容：

loginButton.addEventListener("click", (e)=> {
    e.preventDefault();

    const username = loginForm.username.value;
    const password = loginForm.password.value;

    // 兼容本地存储无数据的情况，默认赋值为空数组
    const checkUser = JSON.parse(localStorage.getItem("registred users")) || [];
    // 用Array.some()遍历比对字段值，对应注册时存储的字段名
    const checkUserInfo = checkUser.some(item => item.registerUsername === username && item.registerPassword === password);

    if( checkUserInfo ){
        alert("登录成功！");
        location.reload();
    } else {
        loginError.style.opacity = 2;
    }
})

方案2（推荐）：统一字段命名，后续维护更清晰 #

先修改注册逻辑中构造用户数据的部分，把属性名统一为更通用的username、password：

// 注册逻辑里替换这行即可
const userData = {username: registerUsername, password: registerPassword};

再把登录校验的比对逻辑对应修改：

const checkUserInfo = checkUser.some(item => item.username === username && item.password === password);

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