關於這個模組功能模組的由來，這是鳥大大的處女秀，為什麼這麼說呢？一天在群裡，一個哥們說有私活，開發一個****模組，我那天手痒痒就和他聊了兩句，然後，就決定給她做這個模組了，和他談了談交付時間，他說最遲兩天，然後談了談加個，最後達成，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("系統錯誤"); } });Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
