在许多网站的登录页面中，都提供了“记住密码”的功能，用户在勾选该选项后，下次登录时可以自动填充用户名和密码，方便了用户的登录操作。本文将介绍如何使用js实现这一功能，涉及到cookie和localStorage两种方法。
在用户登录成功后，可以使用js将用户名和密码以cookie的形式保存在浏览器中，代码如下：
function rememberMe(username, password) {
let expires = new Date();
// 设置cookie的过期时间为7天后
expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000);
// 将用户名和密码使用分号隔开，拼接成一个字符串
let loginInfo = `${username};${password}`;
// 将字符串保存到cookie中
document.cookie = `loginInfo=${loginInfo};expires=${expires.toGMTString()}`;
}
expires 是设置 cookie 的过期时间，通过 setTime() 方法设置为当前时间 + 7 天后的时间；loginInfo 是将用户名和密码使用分号隔开拼接成的字符串，便于在下次登录时解析；document.cookie 是将字符串保存到 cookie 中，其中 expires 是通过 toGMTString() 方法将过期时间转化为 GMT 格式；在下次访问登录页面时，可以使用js从浏览器中获取保存的用户名和密码，代码如下：
function getLoginInfo() {
let cookie = document.cookie;
let cookies = cookie.split("; ");
let loginInfo = "";
for (let i = 0; i < cookies.length; i++) {
let arr = cookies[i].split("=");
if (arr[0] === "loginInfo") {
loginInfo = arr[1];
break;
}
}
if (loginInfo !== "") {
let userInfo = loginInfo.split(";");
// 返回用户名和密码组成的对象
return { username: userInfo[0], password: userInfo[1] };
} else {
return null;
}
}
document.cookie 是从浏览器中获取保存的cookie；cookie.split("; ") 是将cookie字符串按照分号空格分割成数组；loginInfo 是用来保存当前登录用户的用户名和密码；userInfo 是将用户名和密码从字符串中分离出来，组成一个包含两个属性的对象；下面以一个简单的登录页面为例，演示如何使用cookie实现记住密码功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form action="login.php" method="post">
<input type="text" name="username" placeholder="请输入用户名"><br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="checkbox" name="remember" value="1">记住密码<br>
<input type="submit" value="登录">
</form>
<script>
window.onload = function() {
let loginInfo = getLoginInfo();
if (loginInfo !== null) {
let usernameInput = document.getElementsByName("username")[0];
let passwordInput = document.getElementsByName("password")[0];
let rememberInput = document.getElementsByName("remember")[0];
usernameInput.value = loginInfo.username;
passwordInput.value = loginInfo.password;
rememberInput.checked = true;
}
}
function rememberMe(username, password) {
let expires = new Date();
expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000);
let loginInfo = `${username};${password}`;
document.cookie = `loginInfo=${loginInfo};expires=${expires.toGMTString()}`;
}
function getLoginInfo() {
let cookie = document.cookie;
let cookies = cookie.split("; ");
let loginInfo = "";
for (let i = 0; i < cookies.length; i++) {
let arr = cookies[i].split("=");
if (arr[0] === "loginInfo") {
loginInfo = arr[1];
break;
}
}
if (loginInfo !== "") {
let userInfo = loginInfo.split(";");
return { username: userInfo[0], password: userInfo[1] };
} else {
return null;
}
}
let form = document.getElementsByTagName("form")[0];
form.onsubmit = function(event) {
let usernameInput = document.getElementsByName("username")[0];
let passwordInput = document.getElementsByName("password")[0];
let rememberInput = document.getElementsByName("remember")[0];
if (rememberInput.checked) {
rememberMe(usernameInput.value, passwordInput.value);
} else {
let expires = new Date(0);
document.cookie = `loginInfo=;expires=${expires.toGMTString()}`;
}
}
</script>
</body>
</html>
该页面包含了一个form表单，其中有用户名、密码和“记住密码”的复选框。在表单提交时，会根据复选框的状态使用rememberMe()函数设置或清除cookie，用户下一次打开页面时，用户名和密码会自动填充，同时复选框也会被选上。使用getLoginInfo()函数从cookie中获取用户名和密码，然后将用户名和密码填入表单中即可。
除了使用cookie之外，localStorage也是保存数据的一种常用方式。localStorage和cookie的不同之处在于，localStorage保存的数据不会随着浏览器请求发送到服务器端，因此更加安全。那么如何使用localStorage保存用户名和密码呢？代码如下：
function rememberMe(username, password) {
let userinfo = {username: username, password: password};
// 将用户信息转换为JSON格式
let userinfo_str = JSON.stringify(userinfo);
// 将JSON字符串保存到localStorage中
localStorage.setItem('userinfo', userinfo_str);
}
JSON.stringify() 方法将其转换为字符串；localStorage.setItem() 方法将字符串保存到localStorage中，key的值为“userinfo”；在用户下次访问登录页面时，可以使用js从localStorage中获取保存的用户名和密码，代码如下：
function getLoginInfoFromStorage() {
// 从localStorage中获取保存的用户信息
let userinfo_str = localStorage.getItem("userinfo");
if (userinfo_str) {
// 将JSON字符串转换为对象
let userinfo = JSON.parse(userinfo_str);
// 返回用户名和密码组成的对象
return { username: userinfo.username, password: userinfo.password };
}
return null;
}
localStorage.getItem() 方法从localStorage中获取保存的用户信息；JSON.parse() 方法将字符串转换为对象；下面以一个示例页面为例，演示如何使用localStorage实现记住密码功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form action="login.php" method="post">
<input type="text" name="username" placeholder="请输入用户名"><br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="checkbox" name="remember" value="1">记住密码<br>
<input type="submit" value="登录">
</form>
<script>
window.onload = function() {
let loginInfo = getLoginInfoFromStorage();
if (loginInfo !== null) {
let usernameInput = document.getElementsByName("username")[0];
let passwordInput = document.getElementsByName("password")[0];
let rememberInput = document.getElementsByName("remember")[0];
usernameInput.value = loginInfo.username;
passwordInput.value = loginInfo.password;
rememberInput.checked = true;
}
}
function rememberMe(username, password) {
let userinfo = {username: username, password: password};
let userinfo_str = JSON.stringify(userinfo);
localStorage.setItem('userinfo', userinfo_str);
}
function getLoginInfoFromStorage() {
let userinfo_str = localStorage.getItem("userinfo");
if (userinfo_str) {
let userinfo = JSON.parse(userinfo_str);
return { username: userinfo.username, password: userinfo.password };
}
return null;
}
let form = document.getElementsByTagName("form")[0];
form.onsubmit = function(event) {
let usernameInput = document.getElementsByName("username")[0];
let passwordInput = document.getElementsByName("password")[0];
let rememberInput = document.getElementsByName("remember")[0];
if (rememberInput.checked) {
rememberMe(usernameInput.value, passwordInput.value);
} else {
localStorage.removeItem("userinfo");
}
}
</script>
</body>
</html>
该页面与之前的例子类似，但现在我们使用localStorage保存用户信息。使用 localStorage.getItem() 方法从localStorage中获取保存的信息。可以通过 JSON.parse() 方法将字符串转化为对象，然后将用户名和密码填入表单中即可。在表单提交时同样使用记住密码和清除信息两种操作。
本文链接：http://task.lmcjl.com/news/11013.html