用localStorge开发登录模块的记住密码与自动登录
创始人
2024-11-27 22:21:45
0次

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

充电:了解localstorge

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

效果图:

用localStorge开发登录模块的记住密码与自动登录

核心源码分享:




  

  登录 - 仿知乎 - Thousands Find
  
  
  


  
              仿知乎       生活热爱分享 - 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("系统错误");
              }
            });

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...