如何检查用户是否存在于本地存储中

我有一个类项目来构建一个用户注册和登录表单，该表单使用本地存储存储数据。如果新用户注册，它会将他们的电子邮件地址和密码存储在localStorage中，该存储按预期工作。

但我发现，当一个未注册的用户尝试登录时和一个注册的用户试图登录时，很难比较数据。

如果用户已注册并尝试登录，则应将输入值与localStorage中存储的数据进行比较，并提醒"登录成功"，否则"不是注册用户"。

我正在使用JavaScript来做这件事。非常感谢您的帮助。

这是代码：

var userData;
var usersr;
var loginData;
var usersl;
// For user registration 
const registerBtn = document.getElementById('register-btn')
function UserRegistration() {
userData = [{
email: document.getElementById('register-email').value
}, {
password: document.getElementById('register-pass').value
}];
usersr = JSON.parse(localStorage.getItem('Users')) || [];
usersr.push(userData);
localStorage.setItem('Users', JSON.stringify(usersr));
location.reload()
console.log(userData)
}
// For user login 
const loginBtn = document.getElementById('login-btn')
function loginUser() {
usersl = JSON.parse(localStorage.getItem('UsersLogin')) || [];
loginData = [{
loginEmail: document.getElementById('login-email').value
}, {
loginPass: document.getElementById('login-pass').value
}];
usersl.push(loginData)
localStorage.setItem('UsersLogin', JSON.stringify(usersl))
console.log(usersl)
location.reload()
}

里面有很多不必要的代码。您可以使用以下功能使其工作：

function userRegistration() {
const userData = {
email: document.getElementById('register-email').value,
password: document.getElementById('register-pass').value
};
localStorage.setItem('UsersLogin', JSON.stringify(userData));
window.location.reload();
}
function loginUser() {
const loginEmail = document.getElementById('login-email').value
const loginPass = document.getElementById('login-pass').value
if (localStorage.getItem('UsersLogin')) {
const loginDeets = JSON.parse(localStorage.getItem('UsersLogin'))
if (loginEmail === loginDeets.email && loginPass === loginDeets.password) {
console.log('Login successful')
} else {
console.log('Wrong credentials')
}
} else {
console.log('Not a registered user')
}
}

在这个登录函数中，您首先需要检查localStorage中是否存在UsersLogin属性。如果存在，则检查输入是否与该UsersLogin属性中存储的内容相匹配。如果匹配，请说"登录成功"；如果不匹配，则说"凭据错误"。如果localStorage中根本没有UsersLogin属性，请说"不是注册用户"。

根据请求更新：

如果您想将以前注册的用户保留在localStorage中，并只更新UsersLogin属性以包括新注册的用户，那么您可以这样做：

function UserRegistration() {
let storedUsers = localStorage.UsersLogin ? JSON.parse(localStorage.UsersLogin) : [];
const userData = {
email: document.getElementById('register-email').value,
password: document.getElementById('register-pass').value
};
storedUsers.push(userData);
localStorage.setItem('UsersLogin', JSON.stringify(storedUsers));
window.location.reload();
}
function loginUser() {
const loginEmail = document.getElementById('login-email').value
const loginPass = document.getElementById('login-pass').value
if (localStorage.getItem('UsersLogin')) {
const allStoredUsers = JSON.parse(localStorage.getItem('UsersLogin'));
const matchedUser = allStoredUsers.filter(user => {
return loginEmail === user.email && loginPass === user.password;
})
if (matchedUser.length) {
console.log('Login successful')
} else {
console.log('Wrong credentials')
}
} else {
console.log('Wrong credentials') // Don't say "Not a registered user"
}
}

注意：您可能必须清除新函数的localStorage因为localStorage.UsersLogin现在是以前的array是object，因此如果您不清除它，它可能会引发错误第一只需在控制台中运行localStorage.clear()即可。

此外，我知道我在第一块代码中做到了这一点，但不要告诉用户是否存在用户配置文件(不要记录"不是注册用户"(，因为这是一个安全缺陷。它向用户提示谁在您的数据库中，谁不在。对于黑客或恶意行为者来说，这是有价值的信息。相反，只需再次说"错误的凭据"。😌

好的，我已经把这个代码注册了，现在你可以写代码登录了，我负责用户复制

<!DOCTYPE html>
<html lang="en-us"></html>
<head>
<meta charset="utf-8">
<title>Register</title>
<style>
</style>
</head>
<body>
<form onsubmit="return false">
<input type="email" placeholder="email"><br>
<input type="password"><br>
<input type="submit" value="register">
</form>
<script>
var emailElement = document.querySelector("[type='email']"),
passwordElement = document.querySelector("[type='password']");
if(!localStorage["UsersAuth"]) {
localStorage["UsersAuth"] = "{}";
}
document.querySelector("[type='submit']").onclick = function() {
var registeredUsers = JSON.parse(localStorage["UsersAuth"]);
if(emailElement.value in registeredUsers) {
alert("This email is already registered!");
}else {
registeredUsers[emailElement.value] = passwordElement.value;
}
localStorage["UsersAuth"] = JSON.stringify(registeredUsers);
}
</script>
</body>
</html>

我想你正在寻找类似的东西

// For user registration 
const registerBtn = document.getElementById('register-btn')
function UserRegistration() {
var userData = {
email: document.getElementById('register-email').value,
password: document.getElementById('register-pass').value
};
var usersr = JSON.parse(localStorage.getItem('Users')) || [];
if(!usersr.some(user => user.email === userData.email)) {
usersr.push(userData);
localStorage.setItem('Users', JSON.stringify(usersr));
location.reload()
console.log(userData)
}
else {
//email already registered
}
}
// For user login 
const loginBtn = document.getElementById('login-btn')
function loginUser() {
var usersl = JSON.parse(localStorage.getItem('UsersLogin')) || [];
var usersr = JSON.parse(localStorage.getItem('Users')) || [];
var loginData = {
loginEmail: document.getElementById('login-email').value,
loginPass: document.getElementById('login-pass').value
};
var currentUser = usersr.filter(user => user.email === loginData.loginEmail);
if(currentUser.length > 0) {
//current email is registered
if(currentUser[0].password === loginData.loginPass) {
//password do not match 
return;
}
if(!usersl.some(user => user.email === loginData.loginEmail)) {
// currently not logged in, so login
usersl.push(loginData);
localStorage.setItem('UsersLogin', JSON.stringify(usersl))
console.log(usersl)
location.reload()
}
else {
// currently logged in
}
}
else {
// not registered email
}
}

相关内容

最新更新

热门标签：