基于localStorge開發(fā)登錄模塊的記住密碼與自動登錄實例

更新時間：2017年08月25日 08:22:42 投稿：jingxian

下面小編就為大家?guī)硪黄趌ocalStorge開發(fā)登錄模塊的記住密碼與自動登錄實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

關于這個模塊功能模塊的由來，這是鳥大大的處女秀，為什么這么說呢？一天在群里，一個哥們說有私活，開發(fā)一個****模塊，我那天手癢癢就和他聊了兩句，然后，就決定給她做這個模塊了，和他談了談交付時間，他說最遲兩天，然后談了談加個，最后達成，500￥?。?！這個模塊其實第一天晚上我就開發(fā)出來了，那時我給他微信說，功能模塊開發(fā)ok了，要不要遠程查看一下，沒問題的話就交了，一會他回我，好了就發(fā)過來，然后微信就轉(zhuǎn)過來500￥，當時很詫異，畢竟是處女秀，然后就把項目交給他了，并且是完美交付，在客戶那里，也沒有出現(xiàn)問題！到如今想想，還激動啊！記錄那個時刻--2016-3。

摘要：傳動的記住密碼與自動登錄模塊，都是基于cookie，但是cookie上做的話，有一些弊端，鳥看了就是cookie文件大小受限，所以本問敘述的是基于H5上的storge，本地持久化存儲來做的自動登錄和記住密碼的，所以如果你不懂storge的話，建議先去充電！

充電：了解localstorge

備注：這是一個仿網(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 本地存儲，填充用戶名密碼,如果自動登錄有值直接跳轉(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('正在自動登錄'); 
            $("#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 />
            記住密碼&nbsp;
          </label>

          <label for="autologin" class="forgot-password">
            <input type="checkbox" name="isAutoLoginId" id="isAutoLoginId" class="remember-mecheck" checked />
            自動登錄&nbsp;
          </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，核心代碼贊一下

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，核心代碼贊一贊

$(document).ready(function () {
      //讀取 localStage 本地存儲，填充用戶名密碼,如果自動登錄有值直接跳轉(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.自動登錄：這個功能還用我說嗎？和記住密碼類似!

//下次自動登錄  
        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ā)生異步

請求，就不用用戶做出點擊登錄事件了！

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ā)登錄模塊的記住密碼與自動登錄實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

.Net Core日志記錄之自定義日志組件
這篇文章介紹了.Net Core日志記錄之自定義日志組件，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
ASP.NET Core中如何使用表達式樹創(chuàng)建URL詳解
這篇文章主要給大家介紹了關于ASP.NET Core中如何使用表達式樹創(chuàng)建URL的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-10-10
Asp.net?MVC中的Http管道事件為什么要以Application_開頭(原因解析)
在ASP.NET?MVC中,為了在API請求結束時釋放數(shù)據(jù)庫鏈接,避免連接池被爆掉,可以通過在Global.asax.cs文件中定義并實現(xiàn)Application_EndRequest方法來實現(xiàn),本文介紹Asp.net?MVC中的Http管道事件為什么要以Application_開頭,感興趣的朋友一起看看吧
2024-12-12
在Asp.net下實現(xiàn)變長連接的web即時應用的實現(xiàn)范例及ReverseAjax的演示介紹
根據(jù)公司近期的一個培訓整理的資料，附件包括一個完整的使用變長連接的web即時聊天室的范例和針對ReverseAjax的ppt培訓文稿，其中ppt中包含了對范例程序的完整講解
2011-12-12
.net三層結構初探分析
最近開始對架構開始了研究，當然由于水平不夠，先研究了“簡單的三層結構”，至于“抽象工廠模式”放后面來研究吧！
2008-09-09
asp.net 彈出警告窗口實現(xiàn)代碼
提供一個可選“是”“否”的彈出窗口，若選是，則跳到url1,選否則跳到url2
2009-07-07
.NET的動態(tài)編譯與WS服務調(diào)用詳解
這篇文章介紹了.NET的動態(tài)編譯與WS服務調(diào)用詳解，有需要的朋友可以參考一下，希望對你有所幫助
2013-07-07
asp.net5中用戶認證與授權(2)
ASP.NET5主要提供了兩種應用程序，其一就是ASP.NET5控制臺程序，另外一個是ASP.NET Web 應用程序。本文給大家介紹asp.net5中用戶認證與授權(2)，需要的童鞋可以參考下
2015-10-10
ASP.NET Core緩存靜態(tài)資源示例詳解
我們在優(yōu)化Web服務的時候，對于靜態(tài)的資源文件，通常都是通過客戶端緩存、服務器緩存、CDN緩存，這三種方式來緩解客戶端對于Web服務器的連接請求壓力的。下面這篇文章主要給大家介紹了關于ASP.NET Core緩存靜態(tài)資源的相關資料，需要的朋友可以參考下。
2018-02-02
讓aspx頁面自主控制調(diào)用記錄的數(shù)量,類型,隨時更改,不用重新編譯的實現(xiàn)方法
我們經(jīng)常會做一些企業(yè)站點,為了數(shù)據(jù)調(diào)用,我們傷透腦筋,我們想方設法讓數(shù)據(jù)顯示變得簡單,又易于維護,這使得我們創(chuàng)造諸于模板之類的東東去搞企業(yè)站,門戶等,
2011-08-08