很多登录功能上都有个“记住密码”的功能,其实无非就是对cookie的读取。
下面展示这个功能的代码,原作者已无法考究。。。。
测试方法:直接输入账号密码,提交后,刷新页面,再输入同样的账号,就可以显示
1 <!DOCTYPE HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>js COOKIE 记住帐号或密码</title> 5 <script type="text/javascript"> 6 window.onload=function onLoginLoaded() { 7 if (isPostBack == "False") { 8 GetLastUser(); 9 } 10 } 11 12 function GetLastUser() { 13 var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";//GUID标识符 14 var usr = GetCookie(id); 15 if (usr != null) { 16 document.getElementById('txtUserName').value = usr; 17 } else { 18 document.getElementById('txtUserName').value = "001"; 19 } 20 GetPwdAndChk(); 21 } 22 //点击登录时触发客户端事件 23 24 function SetPwdAndChk() { 25 //取用户名 26 var usr = document.getElementById('txtUserName').value; 27 alert(usr); 28 //将最后一个用户信息写入到Cookie 29 SetLastUser(usr); 30 //如果记住密码选项被选中 31 if (document.getElementById('chkRememberPwd').checked == true) { 32 //取密码值 33 var pwd = document.getElementById('txtPassword').value; 34 alert(pwd); 35 var expdate = new Date(); 36 expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000)); 37 //将用户名和密码写入到Cookie 38 SetCookie(usr, pwd, expdate); 39 } else { 40 //如果没有选中记住密码,则立即过期 41 ResetCookie(); 42 } 43 } 44 45 function SetLastUser(usr) { 46 var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67"; 47 var expdate = new Date(); 48 //当前时间加上两周的时间 49 expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000)); 50 SetCookie(id, usr, expdate); 51 } 52 //用户名失去焦点时调用该方法 53 54 function GetPwdAndChk() { 55 var usr = document.getElementById('txtUserName').value; 56 var pwd = GetCookie(usr); 57 if (pwd != null) { 58 document.getElementById('chkRememberPwd').checked = true; 59 document.getElementById('txtPassword').value = pwd; 60 } else { 61 document.getElementById('chkRememberPwd').checked = false; 62 document.getElementById('txtPassword').value = ""; 63 } 64 } 65 //取Cookie的值 66 67 function GetCookie(name) { 68 var arg = name + "="; 69 var alen = arg.length; 70 var clen = document.cookie.length; 71 var i = 0; 72 while (i < clen) { 73 var j = i + alen; 74 //alert(j); 75 if (document.cookie.substring(i, j) == arg) return getCookieVal(j); 76 i = document.cookie.indexOf(" ", i) + 1; 77 if (i == 0) break; 78 } 79 return null; 80 } 81 var isPostBack = "<%= IsPostBack %>"; 82 83 function getCookieVal(offset) { 84 var endstr = document.cookie.indexOf(";", offset); 85 if (endstr == -1) endstr = document.cookie.length; 86 return unescape(document.cookie.substring(offset, endstr)); 87 } 88 //写入到Cookie 89 90 function SetCookie(name, value, expires) { 91 var argv = SetCookie.arguments; 92 //本例中length = 3 93 var argc = SetCookie.arguments.length; 94 var expires = (argc > 2) ? argv[2] : null; 95 var path = (argc > 3) ? argv[3] : null; 96 var domain = (argc > 4) ? argv[4] : null; 97 var secure = (argc > 5) ? argv[5] : false; 98 document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); 99 } 100 101 function ResetCookie() { 102 var usr = document.getElementById('txtUserName').value; 103 var expdate = new Date(); 104 SetCookie(usr, null, expdate); 105 } 106 </script> 107 </head> 108 <body> 109 <form id="form1"> 110 <div> 用户名: 111 <input type="text" ID="txtUserName" onblur="GetPwdAndChk()"> 112 <input type="password" ID="txtPassword"> 113 密码: 114 <input type="checkbox" ID="chkRememberPwd" /> 115 记住密码 116 <input type="button" OnClick="SetPwdAndChk()" value="进入"/> 117 </div> 118 </form> 119 </body> 120 </html>