JavaScript使用cookie实现记住账号密码功能

这篇文章主要介绍了JavaScript使用cookie实现记住账号密码功能,本文直接给出完整测试代码,需要的朋友可以参考下

很多登录功能上都有个“记住密码”的功能，其实无非就是对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>