關于這個模塊功能模塊的由來，這是鳥大大的處女秀，為什么這么說呢？一天在群里，一個哥們說有私活，開發(fā)一個****模塊，我那天手癢癢就和他聊了兩句，然后，就決定給她做這個模塊了，和他談了談交付時間，他說最遲兩天，然后談了談加個，最后達成，500￥！！！這個模塊其實第一天晚上我就開發(fā)出來了，那時我給他微信說，功能模塊開發(fā)ok了，要不要遠程查看一下，沒問題的話就交了，一會他回我，好了就發(fā)過來，然后微信就轉過來500￥，當時很詫異，畢竟是處女秀，然后就把項目交給他了，并且是完美交付，在客戶那里，也沒有出現(xiàn)問題！到如今想想，還激動啊！記錄那個時刻--2016-3。
摘要：傳動的記住密碼與自動登錄模塊，都是基于cookie，但是cookie上做的話，有一些弊端，鳥看了就是cookie文件大小受限，所以本問敘述的是基于H5上的storge，本地持久化存儲來做的自動登錄和記住密碼的，所以如果你不懂storge的話，建議先去充電！
充電：了解localstorge
備注：這是一個仿網(wǎng)頁知乎的登錄模塊，如果想要完整源碼，可以聯(lián)系鳥哦
效果圖：
核心源碼分享：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>登錄 - 仿知乎 - Thousands Find</title> <link rel="stylesheet" type="text/css" href="style/register-login.css" rel="external nofollow" > <script type="text/javascript" src="js/jquery.min.js"></script> <script> $(document).ready(function () { //讀取 localStage 本地存儲，填充用戶名密碼,如果自動登錄有值直接跳轉； //相反，跳轉到本頁面,等待登陸處理 var storage = window.localStorage; var getEmail = storage["email"]; var getPwd = storage["password"]; var getisstroepwd = storage["isstorePwd"]; var getisautologin = storage["isautologin"]; if ("yes" == getisstroepwd) { if ("yes" == getisautologin) { if ((("" != getEmail) || (null != getEmail)) && (("" != getPwd) || (null != getPwd))) { //lacoste 已經(jīng)保存 登陸信息 直接登陸 //alert('正在自動登錄'); $("#email").val(getEmail); $("#password").val(getPwd); // window.location=""; //加載時顯示：正在自動登錄 $.ajax({ url: 'LoginServlet.ashx', data: { email: getEmail, password: getPwd }, dataType: 'json', success: function (data) { if (data.msg == "") { alert("賬號信息異常，請核實后重新登錄"); } else { //alert(123); //登錄成功后保存session，如果選擇了記住密碼，再保存到本地 window.location.href ='Default2.aspx'; } }, error: function () { alert("系統(tǒng)錯誤"); } }); } } else { $("#email").val(getEmail); $("#password").val(getPwd); document.getElementById("isRemberPwdId").checked = true; } } }); function login() { var userEmail = $("#email").val(); var userPassWord = $("#password").val(); if (userEmail != "" && userPassWord != "") { var storage = window.localStorage; //記住密碼 if (document.getElementById("isRemberPwdId").checked) { //存儲到loaclStage //alert(134); storage["email"] = userEmail; storage["password"] = userPassWord; storage["isstorePwd"] = "yes"; } else { storage["email"] = userEmail; storage["isstorePwd"] = "no"; } //下次自動登錄 if (document.getElementById("isAutoLoginId").checked) { //存儲到loaclStage storage["email"] = userEmail; storage["password"] = userPassWord; storage["isstorePwd"] = "yes"; storage["isautologin"] = "yes"; } else { storage["email"] = userEmail; storage["isautologin"] = "no"; } $.ajax({ url: 'LoginServlet.ashx', data: { "email": userEmail, "password": userPassWord }, dataType: 'json', success: function (data) { if (data.msg == "") { alert("用戶名或密碼錯誤"); } else { alert("登陸成功"); //登錄成功后保存session，如果選擇了記住密碼，再保存到本地 window.location.href = 'Default.aspx'; } }, error: function () { alert("系統(tǒng)錯誤1"); } }); //alert("登錄成功"); } else { alert("用戶名密碼不能為空"); } } </script></head><body> <div id="box"></div> <div class="cent-box"> <div class="cent-box-header"> <h1 class="main-title hide">仿知乎</h1> <h2 class="sub-title">生活熱愛分享 - Thousands Find</h2> </div> <div class="cont-main clearfix"> <div class="index-tab"> <div class="index-slide-nav"> <a href="login.html" rel="external nofollow" class="active">登錄</a> <a href="register.html" rel="external nofollow" >注冊</a> <div class="slide-bar"></div> </div> </div> <form id="loginform" name="loginform" autocomplete="on" method="post"> <div class="login form"> <div class="group"> <div class="group-ipt email"> <input type="email" name="email" id="email" class="ipt" placeholder="郵箱地址" required/> </div> <div class="group-ipt password"> <input type="password" name="password" id="password" class="ipt" placeholder="輸入您的登錄密碼" required/> </div> </div> </div> <div class="button"> <button type="button" class="login-btn register-btn" id="button" onclick="login()">登錄</button> </div> <div class="remember clearfix"> <label for="loginkeeping" class="remember-me"> <input type="checkbox" name="isRemberPwdId" id="isRemberPwdId" class="remember-mecheck" checked /> 記住密碼 ? </label> <label for="autologin" class="forgot-password"> <input type="checkbox" name="isAutoLoginId" id="isAutoLoginId" class="remember-mecheck" checked /> 自動登錄 </label> </div> </form> </div> </div> <div class="footer"> <p>仿知乎 - Thousands Find</p> <p>copy@*.* 2016</p> </div> <script src='js/particles.js' type="text/javascript"></script> <script src='js/background.js' type="text/javascript"></script> <script src='js/jquery.min.js' type="text/javascript"></script> <script src='js/layer/layer.js' type="text/javascript"></script> <script src='js/index.js' type="text/javascript"></script></body></html> |
最后總結一下：
這個模塊是通用的，我們要做的是：
1.當用戶點擊登錄的時候，首先拿到表單里的數(shù)據(jù)
2.做出判斷，判斷用戶是否勾選記住密碼 或者 自動登錄
3.都沒勾選，對數(shù)據(jù)進行加密，發(fā)到服務器端做登錄校驗，之后返回
4.勾選了記住密碼，就將用戶名密碼保存到storge，核心代碼贊一下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var storage = window.localStorage; //記住密碼 if (document.getElementById("isRemberPwdId").checked) { //存儲到loaclStage //alert(134); storage["email"] = userEmail; storage["password"] = userPassWord; storage["isstorePwd"] = "yes"; } else { storage["email"] = userEmail; storage["isstorePwd"] = "no"; } |
記住，這時你已經(jīng)勾選了記住密碼，下次登錄時，該如何操作？
在$(function (){})里，也就是瀏覽器渲染標簽時，做出判斷，看一下storge['isstorePwd']是否為yes，核心代碼贊一贊
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$(document).ready(function () { //讀取 localStage 本地存儲，填充用戶名密碼,如果自動登錄有值直接跳轉； //相反，跳轉到本頁面,等待登陸處理 var storage = window.localStorage; var getEmail = storage["email"]; var getPwd = storage["password"]; var getisstroepwd = storage["isstorePwd"]; var getisautologin = storage["isautologin"]; if ("yes" == getisstroepwd) { if ("yes" == getisautologin) { .... } } else { $("#email").val(getEmail); $("#password").val(getPwd); document.getElementById("isRemberPwdId").checked = true; } } }); |
ok 如果記住密碼就搞定了！
5.自動登錄：這個功能還用我說嗎？和記住密碼類似!
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//下次自動登錄 if (document.getElementById("isAutoLoginId").checked) { //存儲到loaclStage storage["email"] = userEmail; storage["password"] = userPassWord;//密碼存到storage里 storage["isstorePwd"] = "yes"; storage["isautologin"] = "yes"; } else { storage["email"] = userEmail; storage["isautologin"] = "no"; } |
當用戶再次登錄的時候，還是在一加載的時候，做出判斷，是否勾選自動登錄，勾選的話，從storage里拿到數(shù)據(jù)，直接發(fā)生異步
請求，就不用用戶做出點擊登錄事件了！
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
if ("yes" == getisautologin) { if ((("" != getEmail) || (null != getEmail)) && (("" != getPwd) || (null != getPwd))) { //lacoste 已經(jīng)保存 登陸信息 直接登陸 //alert('正在自動登錄'); $("#email").val(getEmail); $("#password").val(getPwd); // window.location=""; //加載時顯示：正在自動登錄 $.ajax({ url: 'LoginServlet.ashx', data: { email: getEmail, password: getPwd }, dataType: 'json', success: function (data) { if (data.msg == "") { alert("賬號信息異常，請核實后重新登錄"); } else { //alert(123); //登錄成功后保存session，如果選擇了記住密碼，再保存到本地 window.location.href ='Default2.aspx'; } }, error: function () { alert("系統(tǒng)錯誤"); } }); |
以上這篇基于localStorge開發(fā)登錄模塊的記住密碼與自動登錄實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：http://www.cnblogs.com/gdsblog/archive/2017/08/24/7425917.html
