localStorge開發實作登入記住密碼與自動登入實例-C#.Net教程-PHP中文網

首頁

後端開發

C#.Net教程

localStorge開發實作登入記住密碼與自動登入實例

巴扎黑

May 18, 2018 pm 05:11 PM

登入

下面小編就為大家帶來一篇基於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(&#39;正在自动登录&#39;); 
            $("#email").val(getEmail);
            $("#password").val(getPwd);
            // window.location="";   
            //加载时显示：正在自动登录 
            $.ajax({
              url: &#39;LoginServlet.ashx&#39;,
              data: {
                email: getEmail,
                password: getPwd
              },
              
              dataType: &#39;json&#39;,
              success: function (data) {
                if (data.msg == "") {
                  alert("账号信息异常，请核实后重新登录");
                } else {
                  //alert(123);
                  //登录成功后保存session，如果选择了记住密码，再保存到本地 
                  window.location.href =&#39;Default2.aspx&#39;; 
                }
              },
              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: &#39;LoginServlet.ashx&#39;,
          data: {
            "email": userEmail,
            "password": userPassWord
          },
          dataType: &#39;json&#39;,
          success: function (data) {
            if (data.msg == "") {
              alert("用户名或密码错误");
            } else {
              alert("登陆成功");
              //登录成功后保存session，如果选择了记住密码，再保存到本地 
              window.location.href = &#39;Default.aspx&#39;;
            }
          },
          error: function () {
            alert("系统错误1");
          }
        });
        //alert("登录成功");
      }
      else {
        alert("用户名密码不能为空");
      }
    }
    
  </script>
</head>
<body>
  <p id="box"></p>
  <p class="cent-box">
    <p class="cent-box-header">
      <h1 id="仿知乎">仿知乎</h1>
      <h2 id="生活热爱分享-nbsp-nbsp-Thousands-nbsp-Find">生活热爱分享 - 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=&#39;js/particles.js&#39; type="text/javascript"></script>
  <script src=&#39;js/background.js&#39; type="text/javascript"></script>
  <script src=&#39;js/jquery.min.js&#39; type="text/javascript"></script>
  
  <script src=&#39;js/layer/layer.js&#39; type="text/javascript"></script>
  <script src=&#39;js/index.js&#39; 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(&#39;正在自动登录&#39;); 
            $("#email").val(getEmail);
            $("#password").val(getPwd);
            // window.location="";   
            //加载时显示：正在自动登录 
            $.ajax({
              url: &#39;LoginServlet.ashx&#39;,
              data: {
                email: getEmail,
                password: getPwd
              },
              
              dataType: &#39;json&#39;,
              success: function (data) {
                if (data.msg == "") {
                  alert("账号信息异常，请核实后重新登录");
                } else {
                  //alert(123);
                  //登录成功后保存session，如果选择了记住密码，再保存到本地 
                  window.location.href =&#39;Default2.aspx&#39;; 
                }
              },
              error: function () {
                alert("系统错误");
              }
            });

以上是localStorge開發實作登入記住密碼與自動登入實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

C＃.NET生態系統：框架，庫和工具Apr 24, 2025 am 12:02 AM

C#.NET生態系統提供了豐富的框架和庫，幫助開發者高效構建應用。 1.ASP.NETCore用於構建高性能Web應用，2.EntityFrameworkCore用於數據庫操作。通過理解這些工具的使用和最佳實踐，開發者可以提高應用的質量和性能。

將C＃.NET應用程序部署到Azure/AWS：逐步指南Apr 23, 2025 am 12:06 AM

如何將C#.NET應用部署到Azure或AWS？答案是使用AzureAppService和AWSElasticBeanstalk。 1.在Azure上，使用AzureAppService和AzurePipelines自動化部署。 2.在AWS上，使用AmazonElasticBeanstalk和AWSLambda實現部署和無服務器計算。

C＃.NET：強大的編程語言簡介Apr 22, 2025 am 12:04 AM

C#和.NET的結合為開發者提供了強大的編程環境。 1）C#支持多態性和異步編程，2）.NET提供跨平台能力和並發處理機制，這使得它們在桌面、Web和移動應用開發中廣泛應用。

.NET框架與C＃：解碼術語Apr 21, 2025 am 12:05 AM

.NETFramework是一個軟件框架，C#是一種編程語言。 1..NETFramework提供庫和服務，支持桌面、Web和移動應用開發。 2.C#設計用於.NETFramework，支持現代編程功能。 3..NETFramework通過CLR管理代碼執行，C#代碼編譯成IL後由CLR運行。 4.使用.NETFramework可快速開發應用，C#提供如LINQ的高級功能。 5.常見錯誤包括類型轉換和異步編程死鎖，調試需用VisualStudio工具。