localStorge开发登录模块的记住密码与自动登录效果是现在很多设计人员经常会遇到的，那么具体效果怎么实现呢？有什么实现方法？感兴趣的下面一起来看看。

传统的记住密码与自动登录模块，都是基于cookie，但是cookie上做的话，有一些弊端，鸟看了就是cookie文件大小受限，所以本问叙述的是基于H5上的storge，本地持久化存储来做的自动登录和记住密码的，所以如果你不懂storge的话，建议先去充电！

充电：了解localstorge

备注：这是一个仿网页知乎的登录模块，如果想要完整源码，可以联系鸟哦

效果图：

核心源码分享：

  

  
  css" href="style/register-login.css" rel="external nofollow" >
  
  


  

  

    

      
仿知乎
      
生活热爱分享 - Thousands Find
    

    

      

        

          登录
          注册
          

        
      
      

        

          

            

              
            
            

              
            

          
        

        

          登录
        

        


          
            
            记住密码 
          

          
            
            自动登录 
          

        
      
    
  

  

    
仿知乎 - Thousands Find
    
copy@*.* 2016
  

  
  
  
  
  
  

最后总结一下：

这个模块是通用的，我们要做的是：

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("系统错误");
              }
            });