JavaScript：使用 localStorage 登录/注册
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34299555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript: Login/Register with localStorage
提问by
Hey there I know it's probably an easy question but I've a problem with my Login/Register in JavaScript. I'm storing the users data via localStorage and when I try to login he always returns my alert message, that the typed in data is wrong.
嘿，我知道这可能是一个简单的问题，但我在 JavaScript 中登录/注册时遇到了问题。我通过 localStorage 存储用户数据，当我尝试登录时，他总是返回我的警报消息，即输入的数据错误。
EDIT: storedName is undefined but password isn't. I still don't get it..
编辑：storedName 未定义，但密码未定义。我还是没看懂。。
EDIT: Problem solved. Thanks to Hank! Solution is in the comments.
编辑：问题解决了。感谢汉克！解决方案在评论中。
Here is my HTML code:
这是我的 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Learning JavaScript</title>
</head>
<body>
<form id="register-form">
<input id="name" type="text" placeholder="Name" value=""/>
<input id="pw" type="password" placeholder="Password" value=""/>
<input id="rgstr_btn" type="submit" value="get Account" onClick="store()"/>
</form>
<form id="login-form">
<input id="userName" type="text" placeholder="Enter Username" value=""/>
<input id="userPw" type="password" placeholder="Enter Password" value=""/>
<input id="login_btn" type="submit" value="Login" onClick="check()"/>
</form>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="login.js"></script>
</body>
</html>
And here is my JavaScript code:
这是我的 JavaScript 代码：
// Name and Password from the register-form
var name = document.getElementById('name');
var pw = document.getElementById('pw');
// storing input from register-form
function store() {
localStorage.setItem('name', name.value);
localStorage.setItem('pw', pw.value);
}
// check if stored data from register-form is equal to entered data in the login-form
function check() {
// stored data from the register-form
var storedName = localStorage.getItem('name');
var storedPw = localStorage.getItem('pw');
// entered data from the login-form
var userName = document.getElementById('userName');
var userPw = document.getElementById('userPw');
// check if stored data from register-form is equal to data from login form
if(userName.value !== storedName || userPw.value !== storedPw) {
alert('ERROR');
}else {
alert('You are loged in.');
}
}
采纳答案by Hank
you have 2 issues: 1. "name" is a reserved word, it's gonna act goffy on you, change it to something else like name1 or nm or something. 2. don't use !==, != will do, you logic is faulty anyways, change it to this:
你有两个问题： 1.“name”是一个保留字，它会对你表现得很糟糕，把它改成别的东西，比如 name1 或 nm 之类的。2.不要用!==，!=也可以，反正你的逻辑有问题，改成这样：
if(userName.value == storedName && userPw.value == storedPw) {
alert('You are loged in.');
}else {
alert('ERROR.');
}
But yeah, I know you are just practicing, but don't actually save usernames and passwords on the client side.
但是，是的，我知道您只是在练习，但实际上并没有在客户端保存用户名和密码。
回答by Abu Haneefah
// entered data from the login-form
var userName=document.getElementById('userName');
var userPw = document.getElementById('userPw');
This is where the issue came to you.
You wanted to compare the entered values with the localStoragedata. This is good but it should have been like this:
这就是问题出现的地方。您想将输入的值与localStorage数据进行比较。这很好，但它应该是这样的：
var userName = document.getElementById('userName').value;
var userPw = document.getElementById('userPw').value;
This is the correct way to get the value of the input field.
这是获取输入字段值的正确方法。
