今天,分享一下用js实现cookie记住密码,希望对大家有帮助
html中整个login表单form,里面有啥username、password、验证码、记住密码(这里不详细说form)
password输入框上有onfocus()函数,聚焦时查看cookie中有没有记住的密码
login登录键上有sub()函数
<input type="text" class="login-inputStyle" name="loginpwd" id="loginpwd" onfocus="changepwd()" /> <input type="password" class="login-inputStyle" name="password" id="password" onblur="inputpwd(this.value)" style="display: none;" />
<input type="button" value="登录" onclick="sub()" class="login-subStyle" style="width: 290px;">
JavaScript:
html中添加js
<script>
function sub(){
check(); //表单检查[检查用户名、密码,验证码是不是为空之类的]
setPwdAndChk(); //设置cookie,记住密码
$("#loginForm").submit(); //获取表单id,submit
}
</script>
js文件:
function setPwdAndChk() { //取用户名 var account = document.getElementById("loginname").value; var password = document.getElementById("password").value; //将最后一个用户信息写入到Cookie setLastAccount(account); //如果记住密码选项被选中 if (document.getElementById("chkRememberPwd").checked == true) { //取密码值 var expdate = new Date(); expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000)); //将用户名和密码写入到Cookie setCookie(account, password, expdate); } else { //如果没有选中记住密码,则立即过期 resetCookie(); } } function setLastAccount(account) { var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67"; var expdate = new Date(); //当前时间加上两周的时间 expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000)); setCookie(id, account, expdate); } //取Cookie的值 function getCookie(name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) { return getCookieVal(j); } i = document.cookie.indexOf(" ", i) + 1; if (i == 0) { break; } } return null; } //写入到Cookie function setCookie(name, value, expires) { var argv = setCookie.arguments; var argc = setCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); } function resetCookie() { var account = document.getElementById("loginname").value; var expdate = new Date(); setCookie(account, null, expdate); }
再次登录时:
password中的onfocus()函数,回去检查cookie中有没有记住的密码
js:
function changepwd() { getPwdAndChk(); } function inputpwd(v) { if (v == "") { document.getElementById("loginpwd").style.display = ""; document.getElementById("password").style.display = "none"; document.getElementById("loginpwd").setAttribute("placeholder","密码/Password"); } } //取Cookie的值 function getCookie(name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) { return getCookieVal(j); } i = document.cookie.indexOf(" ", i) + 1; if (i == 0) { break; } } return null; } function getCookieVal(offset) { var endstr = document.cookie.indexOf(";", offset); if (endstr == -1) { endstr = document.cookie.length; } return unescape(document.cookie.substring(offset, endstr)); } function getPwdAndChk() { var account = document.getElementById("loginname").value; var password = getCookie(account); if (password != null) { document.getElementById("chkRememberPwd").checked = true; document.getElementById("password").value = password; } else { document.getElementById("chkRememberPwd").checked = false; document.getElementById("password").value = ""; } }
自己写的,如有不足或错误,希望路过大佬指点和海涵