下面小編就為大家帶來一篇基於localStorge開發登入模組的記住密碼與自動登入實例。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧
關於這個模組功能模組的由來,這是鳥大大的處女秀,為什麼這麼說呢?有一天在群組裡,一個哥們說有私活,開發一個****模組,我那天手癢癢就和他聊了兩句,然後,就決定給她做這個模組了,和他談了談交付時間,他說最晚兩天,然後談了加個,最後達成,500¥! ! !這個模組其實第一天晚上我就開發出來了,那時我給他微信說,功能模組開發ok了,要不要遠端查看一下,沒問題的話就交了,一會他回我,好了就發過來,然後微信就轉過來500¥,當時很詬異,畢竟是處女秀,然後就把項目交給他了,並且是完美交付,在客戶那裡,也沒有出現問題!到如今想想,還興奮啊!記錄那個時刻--2016-3。
摘要:傳動的記住密碼與自動登入模組,都是基於cookie,但是cookie上做的話,有些弊端,鳥看了就是cookie檔案大小受限,所以本問敘述的是基於H5上的storge,本地持久化儲存來做的自動登入和記住密碼的,所以如果你不懂storge的話,建議先去充電!
充電:了解localstorge
備註:這是一個仿網頁知乎的登入模組,如果想要完整原始碼,可以聯絡鳥哦
效果圖:
#核心原始碼分享:
<!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 已经保存 登陆信息 直接登陆 //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("系统错误"); } }); } } 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("系统错误1"); } }); //alert("登录成功"); } else { alert("用户名密码不能为空"); } } </script> </head> <body> <p id="box"></p> <p class="cent-box"> <p class="cent-box-header"> <h1 class="main-title hide">仿知乎</h1> <h2 class="sub-title">生活热爱分享 - Thousands Find</h2> </p> <p class="cont-main clearfix"> <p class="index-tab"> <p class="index-slide-nav"> <a href="login.html" rel="external nofollow" class="active">登录</a> <a href="register.html" rel="external nofollow" >注册</a> <p class="slide-bar"></p> </p> </p> <form id="loginform" name="loginform" autocomplete="on" method="post"> <p class="login form"> <p class="group"> <p class="group-ipt email"> <input type="email" name="email" id="email" class="ipt" placeholder="邮箱地址" required/> </p> <p class="group-ipt password"> <input type="password" name="password" id="password" class="ipt" placeholder="输入您的登录密码" required/> </p> </p> </p> <p class="button"> <button type="button" class="login-btn register-btn" id="button" onclick="login()">登录</button> </p> <p 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> </p> </form> </p> </p> <p class="footer"> <p>仿知乎 - Thousands Find</p> <p>copy@*.* 2016</p> </p> <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.當使用者點擊登入的時候,先拿到表單裡的資料
2.做出判斷,判斷使用者是否勾選記住密碼或自動登入
3.都沒勾選,對資料進行加密,發到伺服器端做登入校驗,之後回傳
4.勾選選了記住密碼,就將使用者名稱密碼儲存到storge,核心程式碼讚一下
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"; }
記住,這時你已經勾選了記住密碼,下次登入時,該如何操作?
在$(function (){})裡,也就是瀏覽器渲染標籤時,做出判斷,看一下storge['isstorePwd']是否為yes,核心程式碼讚一讚
$(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.自動登入:這個功能還用我說嗎?和記住密碼類似!
//下次自动登录 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裡拿到數據,直接發生非同步
請求,就不用使用者做出點擊登入事件了!
if ("yes" == getisautologin) { if ((("" != getEmail) || (null != getEmail)) && (("" != getPwd) || (null != getPwd))) { //lacoste 已经保存 登陆信息 直接登陆 //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("系统错误"); } });
以上是localStorge開發實作登入記住密碼與自動登入實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!