纯js实现记住密码

本文讲述了如何纯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);
		}
	}
}