快捷導(dǎo)航

基于localStorge開(kāi)發(fā)登錄模塊的記住密碼與自動(dòng)登錄實(shí)例

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

下面小編就為大家?guī)?lái)一篇基于localStorge開(kāi)發(fā)登錄模塊的記住密碼與自動(dòng)登錄實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

充電：了解localstorge

備注：這是一個(gè)仿網(wǎng)頁(yè)知乎的登錄模塊，如果想要完整源碼，可以聯(lián)系鳥(niǎo)哦

效果圖：

核心源碼分享：

<!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)到本頁(yè)面,等待登陸處理  
      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)信息異常，請(qǐng)核實(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">生活熱愛(ài)分享 - 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" >注冊(cè)</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 />
            自動(dòng)登錄&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>

最后總結(jié)一下：

這個(gè)模塊是通用的，我們要做的是：

1.當(dāng)用戶點(diǎn)擊登錄的時(shí)候，首先拿到表單里的數(shù)據(jù)
2.做出判斷，判斷用戶是否勾選記住密碼或者自動(dòng)登錄

3.都沒(méi)勾選，對(duì)數(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)到本頁(yè)面,等待登陸處理  
      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è)功能還用我說(shuō)嗎？和記住密碼類似!

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

請(qǐng)求，就不用用戶做出點(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)信息異常，請(qǐng)核實(shí)后重新登錄");
                } else {
                  //alert(123);
                  //登錄成功后保存session，如果選擇了記住密碼，再保存到本地 
                  window.location.href ='Default2.aspx'; 
                }
              },
              error: function () {
                alert("系統(tǒng)錯(cuò)誤");
              }
            });

以上這篇基于localStorge開(kāi)發(fā)登錄模塊的記住密碼與自動(dòng)登錄實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。