正文

localStorge开辟完成登录记着暗码与自动登录实例【C#.Net教程】,localStorge,记住,登录

搜教程
搜教程 V管理员 /217 阅读
1127
下面小编就为人人带来一篇基于localStorge开辟登录模块的记着暗码与自动登录实例。小编以为挺不错的，现在就分享给人人，也给人人做个参考。一同追随小编过来看看吧

关于这个模块功用模块的由来，这是鸟大大的处女秀，为何这么说呢？一天在群里，一个哥们说有私活，开辟一个****模块，我那天手痒痒就和他聊了两句，然后，就决定给她做这个模块了，和他谈了谈托付时刻，他说最迟两天，然后谈了谈加个，末了杀青，500￥！！！这个模块实在第一天晚上我就开辟出来了，当时我给他微信说，功用模块开辟ok了，要不要长途检察一下，没问题的话就交了，一会他回我，好了就发过来，然后微信就转过来500￥，当时很惊讶，毕竟是处女秀，然后就把项目交给他了，并且是圆满托付，在客户那边，也没有出现问题！到现在想一想，还冲动啊！纪录谁人时刻--2016-3。

择要：传动的记着暗码与自动登录模块，都是基于cookie，然则cookie上做的话，有一些弊病，鸟看了就是cookie文件大小受限，所以本问叙说的是基于H5上的storge，当地耐久化存储来做的自动登录和记着暗码的，所以假如你不懂storge的话，发起先去充电！

充电：相识localstorge

备注：这是一个仿网页知乎的登录模块，假如想要完全源码，能够联络鸟哦

效果图：

localStorge开辟完成登录记着暗码与自动登录实例【C#.Net教程】,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("体系毛病");
              }
            });

以上就是localStorge开辟完成登录记着暗码与自动登录实例的细致内容，更多请关注ki4网别的相干文章！

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创；版权归原作者所有，仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：i-hu@foxmail.com