本文讲述了如何纯js实现记住密码。
html部分
<form id="myForm" action="login" method="post">
<input type="text" name = "username" id="userName" />
<input type="password" name = "password" id="password" />
<input type="checkbox" id="remember"><label for="remember">记住我</label>
<button type="submit">立即登录</button>
</form>
js部分
// 存储cookie
function setCookie(name, value, day) {
let date = new Date();
date.setDate(date.getDate() + day);
document.cookie = name + '=' + value + ';expires=' + date;
}
// 获取cookie
function getCookie(name) {
let reg = RegExp(name + '=([^;]+)');
let arr = document.cookie.match(reg);
if (arr) {
return arr[1];
} else {
return '';
}
}
// 删除cookie
function delCookie(name) {
setCookie(name, null, -1);
}
window.onload = function () {
let form = document.getElementById('myForm');
let user = document.getelementById('userName');
let psd = document.getelementById('password');
let isRem = document.getelementById('remember');
// 页面加载时,若账号密码存在取出填充
if(getCookie(username) && getCookie('password')) {
user.value = getCookie('username');
psd.value = getCookie('password');
isRem.checked = true;
}
// 记住密码状态改变时
isRem.onchange = function () {
// 若未勾选,清除cookie
if(!this.checked) {
delCookie('username');
delCookie('password');
}
}
// 监听表单事件
form.onsubmit = function () {
// 若勾选记住密码,保存cookie
if (isRem.checked) {
setCookie('username', user.value, 7);
setCookie('password', psd.value, 7);
}
}
}