欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2017年08月25日 08:22:42   投稿:jingxian  
下面小編就為大家?guī)硪黄趌ocalStorge開發(fā)登錄模塊的記住密碼與自動(dòng)登錄實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

關(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 />
            記住密碼&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.都沒勾選,對數(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)文章

最新評(píng)論