js实现cookie记住密码

近来做记住密码时，用js的实现方式做了一下。

login.jsp页面代码

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2. <%
3. String path = request.getContextPath();
4. String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
5. %>
6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
8. <head>
9. <base href="<%=basePath%>" />
10. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
11. <link rel="stylesheet" href="./css/login.css" />
12. <title>登录</title>
13. <!-- 引入js-->
14. <script src="./js/lib/jquery-1.8.0.min.js" type="text/javascript" ></script>
15. <script src="./js/backjs/login.js" type="text/javascript" ></script>
16. </head>
17. <body>
18. <div class="warp">
19. <img src="./images/bf.png" alt="" />
20. <div class="window">
21. <div class="loginWindow"></div>
22. <div class="loginWindowContent">
23. <form action="#"  id="loginForm">
24. <label for="" class="weicome">欢迎登录xxx系统</label>
25. <label for="" class="slogan">智能随行    随到随停</label>
26. <label for="" class="input"> <i> <span></span></i>
27. <input type="text" placeholder="请输入用户名/手机号码" name="name" id="name" />
28. </label>
29. <label for="" class="input" style="margin-top:30px;"> <i><span style="background: url(./images/lock.png) no-repeat;"></span></i>
30. <input type="password" placeholder="请输入密码" name="password" id="password"/>
31. </label>
32. <label for="" class="savePass">
33. <input type="checkbox" value="savePW" name="savePW" id="savePW"/>记住密码 <a href="home/resetPwdUI">忘记登录密码？</a>
34. </label>
35. <label for="" class="sub">
36. <p style="color: red" id="loginMes"></p>
37. <input type="button" value="登录" id="login_BTN"/>
38. </label>
39. <label for="" class="reg">还不是智停车会员，<a href="home/registerUI"><b>点击免费注册</b>>></a></label>
40. </form>
41. </div>
42. </div>
43. <div class="footer">
44. <div class="about">
45. <b><a href="">关于xxx</b>
46. </div>
47. </div>
48. </div>
49. </body>
50. </html>

login.js文件

1. /**
2. * 登录js
3. */
4. $().ready(function(){
5. var loginSum = 0;
6. //点击登录按钮事件
7. $("#login_BTN").unbind("click");
8. $("#login_BTN").bind("click",function(){
9. //修改页面消息显示
10. $("#loginMes").text("正在登陆。。。");
11. //获取表单数据
12. var data = $("#loginForm");
13. var jsonData = data.serialize();
14. var name = data.find("input[name='name']").val();
15. var password = data.find("input[name='password']").val();
16. var savePW = data.find("input[name='savePW']").val();
17. if(name == '' || name == null){
18. $("#loginMes").text("用户名不能为空");
19. return;
20. };
21. if(password == '' || password == null){
22. $("#loginMes").text("密码不能为空");
23. return;
24. };
25. //判断重复提交
26. if(loginSum == 1){
27. //重复提交
28. $("#loginMes").text("正在登陆，请稍候");
29. return;
30. };
31. if(loginSum == 0){
32. loginSum = 1;
33. };
34. //提交
35. $.ajax({
36. url:"home/login",
37. type:'POST',
38. data:jsonData,
39. dataType:'json',
40. error:function(){
41. alert("出错了！！");
42. loginSum = 0;
43. },
44. success:function (data){
45. if(data.code == 0){
46. //保存密码
47. SetPwdAndChk();
48. $("#loginMes").text("登录成功，正在跳转。。。");
49. window.location.href="main/home";
50. }else{
51. $("#loginMes").text("登录失败，用户名或密码错误！");
52. loginSum = 0;
53. };
54. }
55. });
56. });
57. //用户名失去焦点时调用该方法
58. $("#name").unbind("blur");
59. $("#name").bind("blur",function(){
60. GetPwdAndChk();
61. });
62. //=============js cookie===============
63. GetLastUser();
64. function GetLastUser() {
65. var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
66. var usr = GetCookie(id);
67. if (usr != null) {
68. document.getElementById('name').value = usr;
69. } else {
70. //document.getElementById('name').value = "001";
71. }
72. GetPwdAndChk();
73. };
74. //点击登录时触发客户端事件
75. function SetPwdAndChk() {
76. //取用户名
77. var usr = document.getElementById('name').value;
78. //alert(usr);
79. //将最后一个用户信息写入到Cookie
80. SetLastUser(usr);
81. //如果记住密码选项被选中
82. var checked = document.getElementById('savePW').checked;
83. if (checked == true) {
84. //取密码值
85. var pwd = document.getElementById('password').value;
86. //alert(pwd);
87. var expdate = new Date();
88. expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
89. //将用户名和密码写入到Cookie
90. SetCookie(usr, pwd, expdate);
91. } else {
92. //如果没有选中记住密码,则立即过期
93. ResetCookie();
94. }
95. };
96. function SetLastUser(usr) {
97. var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
98. var expdate = new Date();
99. //当前时间加上两周的时间
100. expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
101. SetCookie(id, usr, expdate);
102. };
103. //用户名失去焦点时调用该方法
104. function GetPwdAndChk() {
105. var usr = document.getElementById('name').value;
106. var pwd = GetCookie(usr);
107. if (pwd != null) {
108. document.getElementById('savePW').checked = true;
109. document.getElementById('password').value = pwd;
110. } else {
111. document.getElementById('savePW').checked = false;
112. document.getElementById('password').value = "";
113. }
114. };
115. //取Cookie的值
116. function GetCookie(name) {
117. var arg = name + "=";
118. var alen = arg.length;
119. var clen = document.cookie.length;
120. var i = 0;
121. while (i < clen) {
122. var j = i + alen;
123. //alert(j);
124. if (document.cookie.substring(i, j) == arg)
125. return getCookieVal(j);
126. i = document.cookie.indexOf(" ", i) + 1;
127. if (i == 0)
128. break;
129. }
130. return null;
131. };
132. function getCookieVal(offset) {
133. var endstr = document.cookie.indexOf(";", offset);
134. if (endstr == -1)
135. endstr = document.cookie.length;
136. return unescape(document.cookie.substring(offset, endstr));
137. };
138. //写入到Cookie
139. function SetCookie(name, value, expires) {
140. var argv = SetCookie.arguments;
141. //本例中length = 3
142. var argc = SetCookie.arguments.length;
143. var expires = (argc > 2) ? argv[2] : null;
144. var path = (argc > 3) ? argv[3] : null;
145. var domain = (argc > 4) ? argv[4] : null;
146. var secure = (argc > 5) ? argv[5] : false;
147. document.cookie = name
148. + "="
149. + escape(value)
150. + ((expires == null) ? "" : ("; expires=" + expires
151. .toGMTString()))
152. + ((path == null) ? "" : ("; path=" + path))
153. + ((domain == null) ? "" : ("; domain=" + domain))
154. + ((secure == true) ? "; secure" : "");
155. };
156. function ResetCookie() {
157. var usr = document.getElementById('name').value;
158. var expdate = new Date();
159. SetCookie(usr, null, expdate);
160. };
161. });
162. 转自：http://blog.csdn.net/u013614451/article/details/42201799