如何检查用户是否存在于本地存储中
[英]How to check if user exist in local storage
问题描述
我有这个 class 项目来构建一个使用本地存储存储数据的用户注册和登录表单。 如果新用户注册，它会将他们的 email 地址和密码存储在 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()
}
3 个解决方案
解决方案1
0 2020-04-11 19:11:38
好的，我已经制作了这个代码来注册，现在你可以编写你的代码来登录，我负责用户复制
<!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>
解决方案2
0 已采纳 2020-04-11 19:25:00
里面有很多不必要的代码。 您可以使用这些功能使其工作：
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')
}
}
在此登录 function 中，您首先需要检查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()。
另外，我知道我在第一个代码块中这样做了，但不要告诉用户是否存在用户配置文件（不要记录“非注册用户”），因为这是一个安全漏洞。 它向用户提示谁在您的数据库中，谁不在您的数据库中。 这对黑客或恶意行为者来说是有价值的信息。 而是再次说“错误的凭据”。
解决方案3
0 2020-04-11 19:44:42
我想你正在寻找这样的东西
// 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
}
}
如何检查本地存储数据集中是否存在值？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.