Creé un botón de inicio de sesión que se supone que debe tomar la matriz almacenada en el almacenamiento local del navegador, leer cada elemento y verificar si el nombre de usuario y la contraseña escritos en los cuadros de entrada están dentro de la matriz).
La matriz se toma con éxito del almacenamiento, pero cuando se supone que el código debe leerlo y comparar los elementos con la entrada, por alguna razón, siempre dice que la entrada no está en la matriz. ¿Cómo podría arreglar eso? El código sigue:
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(/[az]+/) && registerPassword.match(/[AZ]+/) && 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; } })
Estás comparando dos objetos por igualdad. Aunque use include, aún verifica si el valor que ingresa es igual a un elemento en la matriz.
Si necesita verificar tanto el nombre de usuario como la contraseña, recorra la matriz con some
y vea si las propiedades de uno de los objetos son iguales a la entrada proporcionada.
let checkUserInfo = checkUser.some(u => u.username === user.username && u.password === user.password);
También tenga en cuenta que este tipo de autenticación del lado del cliente es una autenticación ficticia solo con fines de demostración; no funcionará como autenticación real para ningún servicio.
No debe usar las inclusiones para buscar un objeto similar en una matriz de objetos. Tienes que buscar uno por uno. Debe usar un método de tipo de filtro como find() o some() .
Su código sería algo como:
/*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.: Esta es una forma extremadamente mala de almacenar datos de contraseña. Debería usar alguna biblioteca que use hash como bcryptjs .