检查浏览器本地存储以查找数组中的项目

Question

我创建了一个登录按钮，该按钮应该获取存储在浏览器本地存储中的数组，读取每个项目并检查输入框中写入的用户名和密码是否在数组内）。

数组已成功从存储中取出，但是当代码应该读取它并将项目与输入进行比较时，由于某种原因它总是说输入不在数组中。 我怎么能解决这个问题？ 代码如下：

const loginForm = document.getElementById("loginForm");
const loginButton = document.getElementById("loginButton");
const loginError = document.getElementById("loginError");

const registerForm = document.getElementById("registerForm");
const registerButton = document.getElementById( "registerButton");
const registerError = document.getElementById("registerError");

/*HERE IS THE PROBLEMATIC LOGIN BUTTON*/  
loginButton.addEventListener("click", (e)=> {
    e.preventDefault();

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

    const user ={ username, password};

    let checkUser =[];
    checkUser = JSON.parse(localStorage.getItem("registred users"));

    let checkUserInfo = checkUser.includes(user, 0);

    if( checkUserInfo == true){
        alert("Login sucessful!");
        location.reload();
    } else {
        loginError.style.opacity = 2;

    }
})

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

    const registerUsername = registerForm.registerUsername.value;
    const registerPassword = registerForm.registerPassword.value;
    const confirmPassword = registerForm.confirmPassword.value;
    const registerEmail = registerForm.registerEmail.value;

    const userData = {registerUsername, registerPassword};
    let registredUserData = [];
   

    if(registerPassword.length > 8 && registerPassword.match(/[a-z]+/) && registerPassword.match(/[A-Z]+/) && registerPassword.match(/[0-9]+/) &&  registerPassword.match(/[$@#&!]+/) && registerPassword === confirmPassword && registerEmail.match(/[@/]+/ ) ){      

        registredUserData = JSON.parse(localStorage.getItem("registred users"));
        registredUserData.push(userData);
        localStorage.setItem("registred users",JSON.stringify(registredUserData));
            

        location.reload();
    } else {
        registerError.style.opacity = 2;

    }
})

Answer 1

您正在比较两个对象是否相等。 即使您使用包含，它仍然会检查您输入的值是否等于数组中的元素。

如果您需要同时检查用户名和密码，请使用some循环遍历数组并查看其中一个对象的属性是否等于提供的输入。

let checkUserInfo = checkUser.some(u => u.username === user.username && u.password === user.password);

---

还要记住，这种类型的客户端身份验证是虚拟身份验证，仅用于演示目的； 它不会 function 作为任何服务的真实身份验证。

Answer 2

您不应使用包含在对象数组中搜索类似的 object。 您必须一一搜索。 您应该使用像find()或some()这样的过滤器类型方法。

您的代码将类似于：

/*HERE IS THE PROBLEMATIC LOGIN BUTTON*/  
loginButton.addEventListener("click", (e)=> {
    e.preventDefault();

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

    const user ={ username, password};

    let checkUser =[];
    checkUser = JSON.parse(localStorage.getItem("registred users"));

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

    if( checkUserInfo == true){
        alert("Login sucessful!");
        location.reload();
    } else {
        loginError.style.opacity = 2;

    }
})

Obs.：这是一种非常糟糕的存储密码数据的方法。 您应该使用一些使用 hash 的库，例如bcryptjs 。