基于localStorge開發(fā)登錄模塊的記住密碼與自動(dòng)登錄實(shí)例
關(guān)于這個(gè)模塊功能模塊的由來,這是鳥大大的處女秀,為什么這么說呢?一天在群里,一個(gè)哥們說有私活,開發(fā)一個(gè)****模塊,我那天手癢癢就和他聊了兩句,然后,就決定給她做這個(gè)模塊了,和他談了談交付時(shí)間,他說最遲兩天,然后談了談加個(gè),最后達(dá)成,500¥?。?!這個(gè)模塊其實(shí)第一天晚上我就開發(fā)出來了,那時(shí)我給他微信說,功能模塊開發(fā)ok了,要不要遠(yuǎn)程查看一下,沒問題的話就交了,一會(huì)他回我,好了就發(fā)過來,然后微信就轉(zhuǎn)過來500¥,當(dāng)時(shí)很詫異,畢竟是處女秀,然后就把項(xiàng)目交給他了,并且是完美交付,在客戶那里,也沒有出現(xiàn)問題!到如今想想,還激動(dòng)?。∮涗浤莻€(gè)時(shí)刻--2016-3。
摘要:傳動(dòng)的記住密碼與自動(dòng)登錄模塊,都是基于cookie,但是cookie上做的話,有一些弊端,鳥看了就是cookie文件大小受限,所以本問敘述的是基于H5上的storge,本地持久化存儲(chǔ)來做的自動(dòng)登錄和記住密碼的,所以如果你不懂storge的話,建議先去充電!
充電:了解localstorge
備注:這是一個(gè)仿網(wǎng)頁知乎的登錄模塊,如果想要完整源碼,可以聯(lián)系鳥哦
效果圖:
核心源碼分享:
<!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 本地存儲(chǔ),填充用戶名密碼,如果自動(dòng)登錄有值直接跳轉(zhuǎn); //相反,跳轉(zhuǎn)到本頁面,等待登陸處理 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('正在自動(dòng)登錄'); $("#email").val(getEmail); $("#password").val(getPwd); // window.location=""; //加載時(shí)顯示:正在自動(dòng)登錄 $.ajax({ url: 'LoginServlet.ashx', data: { email: getEmail, password: getPwd }, dataType: 'json', success: function (data) { if (data.msg == "") { alert("賬號(hào)信息異常,請核實(shí)后重新登錄"); } else { //alert(123); //登錄成功后保存session,如果選擇了記住密碼,再保存到本地 window.location.href ='Default2.aspx'; } }, error: function () { alert("系統(tǒng)錯(cuò)誤"); } }); } } 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) { //存儲(chǔ)到loaclStage //alert(134); storage["email"] = userEmail; storage["password"] = userPassWord; storage["isstorePwd"] = "yes"; } else { storage["email"] = userEmail; storage["isstorePwd"] = "no"; } //下次自動(dòng)登錄 if (document.getElementById("isAutoLoginId").checked) { //存儲(chǔ)到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("用戶名或密碼錯(cuò)誤"); } else { alert("登陸成功"); //登錄成功后保存session,如果選擇了記住密碼,再保存到本地 window.location.href = 'Default.aspx'; } }, error: function () { alert("系統(tǒng)錯(cuò)誤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 /> 自動(dòng)登錄 </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>
最后總結(jié)一下:
這個(gè)模塊是通用的,我們要做的是:
1.當(dāng)用戶點(diǎn)擊登錄的時(shí)候,首先拿到表單里的數(shù)據(jù)
2.做出判斷,判斷用戶是否勾選記住密碼 或者 自動(dòng)登錄
3.都沒勾選,對數(shù)據(jù)進(jìn)行加密,發(fā)到服務(wù)器端做登錄校驗(yàn),之后返回
4.勾選了記住密碼,就將用戶名密碼保存到storge,核心代碼贊一下
var storage = window.localStorage; //記住密碼 if (document.getElementById("isRemberPwdId").checked) { //存儲(chǔ)到loaclStage //alert(134); storage["email"] = userEmail; storage["password"] = userPassWord; storage["isstorePwd"] = "yes"; } else { storage["email"] = userEmail; storage["isstorePwd"] = "no"; }
記住,這時(shí)你已經(jīng)勾選了記住密碼,下次登錄時(shí),該如何操作?
在$(function (){})里,也就是瀏覽器渲染標(biāo)簽時(shí),做出判斷,看一下storge['isstorePwd']是否為yes,核心代碼贊一贊
$(document).ready(function () { //讀取 localStage 本地存儲(chǔ),填充用戶名密碼,如果自動(dòng)登錄有值直接跳轉(zhuǎn); //相反,跳轉(zhuǎn)到本頁面,等待登陸處理 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.自動(dòng)登錄:這個(gè)功能還用我說嗎?和記住密碼類似!
//下次自動(dòng)登錄 if (document.getElementById("isAutoLoginId").checked) { //存儲(chǔ)到loaclStage storage["email"] = userEmail; storage["password"] = userPassWord;//密碼存到storage里 storage["isstorePwd"] = "yes"; storage["isautologin"] = "yes"; } else { storage["email"] = userEmail; storage["isautologin"] = "no"; }
當(dāng)用戶再次登錄的時(shí)候,還是在一加載的時(shí)候,做出判斷,是否勾選自動(dòng)登錄,勾選的話,從storage里拿到數(shù)據(jù),直接發(fā)生異步
請求,就不用用戶做出點(diǎn)擊登錄事件了!
if ("yes" == getisautologin) { if ((("" != getEmail) || (null != getEmail)) && (("" != getPwd) || (null != getPwd))) { //lacoste 已經(jīng)保存 登陸信息 直接登陸 //alert('正在自動(dòng)登錄'); $("#email").val(getEmail); $("#password").val(getPwd); // window.location=""; //加載時(shí)顯示:正在自動(dòng)登錄 $.ajax({ url: 'LoginServlet.ashx', data: { email: getEmail, password: getPwd }, dataType: 'json', success: function (data) { if (data.msg == "") { alert("賬號(hào)信息異常,請核實(shí)后重新登錄"); } else { //alert(123); //登錄成功后保存session,如果選擇了記住密碼,再保存到本地 window.location.href ='Default2.aspx'; } }, error: function () { alert("系統(tǒng)錯(cuò)誤"); } });
以上這篇基于localStorge開發(fā)登錄模塊的記住密碼與自動(dòng)登錄實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
ASP.NET2.0:頁面中鏈入的CSS、js文件帶中文時(shí)需注意
ASP.NET2.0:頁面中鏈入的CSS、js文件帶中文時(shí)需注意...2006-09-09asp.net中Fine Uploader文件上傳組件使用介紹
最近在處理后臺(tái)數(shù)據(jù)時(shí)需要實(shí)現(xiàn)文件上傳.考慮到對瀏覽器適配上采用Fine Uploader. Fine Uploader 采用ajax方式實(shí)現(xiàn)對文件上傳.同時(shí)在瀏覽器中直接支持文件拖拽[對瀏覽器版本有要求類似IE版本必須是9或是更高的IE10].2013-01-01