我试图使用 JS 中的 localStorage 进行基本的注册/登录操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>login</h1>
<h2>username</h2>
<input id = "userSave">
<h2>password</h2>
<input id = "passSave">
<button onclick = "saved()">save</button>
<h2 id = "textSave"></h2>
<h1>sign up</h1>
<h2>username</h2>
<input id = "userLoad">
<h2>password</h2>
<input id = "passLoad">
<button onclick = "loaded()">load</button>
<h2 id = "textLoad"></h2>
<script>
function saved() {
let text = document.getElementById("textSave").innerHTML;
let username = document.getElementById("userSave").value;
let password = document.getElementById("passSave").value;
localStorage.setItem(username, password);
text = "saved";
}
function loaded() {
let text = document.getElementById("textLoad").innerHTML;
let username = document.getElementById("userLoad").value;
let password = document.getElementById("passLoad").value;
if (localStorage.getItem(username) == password) {
text = "welcome";
}
else {
text = "login failed";
}
}
</script>
</body>
</html>
我已经检查了一切。拼写、点击次数、函数名称和大部分内容都很好，但无法正常工作
我假设你所说的“它不起作用”的意思是你没有看到任何 DOM 更改。字符串是不可变的，因此它被视为“按值传递”。
如果您想更改 DOM，请将文本引用设置为元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>login</h1>
<h2>username</h2>
<input id = "userSave">
<h2>password</h2>
<input id = "passSave">
<button onclick = "saved()">save</button>
<h2 id = "textSave"></h2>
<h1>sign up</h1>
<h2>username</h2>
<input id = "userLoad">
<h2>password</h2>
<input id = "passLoad">
<button onclick = "loaded()">load</button>
<h2 id = "textLoad"></h2>
<script>
function saved() {
let text = document.getElementById("textSave");
let username = document.getElementById("userSave").value;
let password = document.getElementById("passSave").value;
localStorage.setItem(username, password);
text.innerHTML = "saved";
}
function loaded() {
let text = document.getElementById("textLoad");
let username = document.getElementById("userLoad").value;
let password = document.getElementById("passLoad").value;
if (localStorage.getItem(username) == password) {
text.innerHTML = "welcome";
}
else {
text.innerHTML = "login failed";
}
}
</script>
</body>
</html>
旁注：我意识到这是为了练习，所以我不会深入研究它 - 但是将密码存储为明文，并在客户端上（并对密码进行客户端验证）对于任何实际项目来说都不是一个好主意