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('正在自动登录');
                 $("#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开发实现登录记住密码与自动登录实例的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！