The following editor will bring you an example of remembering passwords and automatic login based on the login module developed by localStorge. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

Regarding the origin of this module’s function module, this is Bird’s debut. Why do you say this? One day in the group, a buddy said that he had a private job to develop a **** module. I chatted with him for a few words because my hands were itchy that day, and then I decided to make this module for her. I talked with him about the delivery time. He said two days at the latest, and then we talked about adding one, and finally reached an agreement of 500 yuan! ! ! I actually developed this module on the first night. At that time, I sent him a WeChat message saying that the functional module development was OK. Do you want to check it remotely? If there is no problem, I will submit it. He will reply to me after a while and send it when it is ready. He came here and transferred 500 RMB via WeChat. He was very surprised at the time. After all, it was his debut. Then he handed the project over to him and it was delivered perfectly. There were no problems with the customer! Thinking about it now, I’m still excited! Record that moment--2016-3.

Abstract: Transmission’s password remembering and automatic login modules are both based on cookies. However, there are some disadvantages when doing it on cookies. If you look at it, the cookie file size is limited, so what this question describes is based on cookies. Storage on H5 uses local persistent storage to automatically log in and remember passwords, so if you don’t understand storage, it is recommended to charge it first!

Charging: Understanding localstorge

Note: This is a login module imitating the web page Zhihu. If you want the complete source code, you can contact Bird Oh

Rendering:

##Core source code sharing:

  

  
  
  
  



  

  

    

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


    

      

        

          登录
          注册
          

        

      

      

        

          

            

              
            
            

              
            

          

        


        

          登录
        

        


          
            
            记住密码 
          

          
            
            自动登录 
          

        
      
    

  


  

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


  
  
  
  
  
  

Final summary Take a look:

This module is universal, what we have to do is:

1. When the user clicks to log in, first get the data in the form

2. Make a judgment , determine whether the user has checked to remember password or automatically log in

3. If neither is checked, the data will be encrypted, sent to the server for login verification, and then returned to

4. Checked If you select Remember Password, you will save the username and password to storage. Like the core code

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";
        }

Remember. At this time, you have checked Remember Password. What should you do when you log in next time?

In $(function (){}), that is, when the browser renders the tag, make a judgment and see if storage['isstorePwd'] is yes. Like the core code

$(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 If you remember the password, you’re done!

5. Automatic login: Do I still need to talk about this function? Similar to remembering passwords!

//下次自动登录  
        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";
        }

When the user logs in again, or when loading, make a judgment whether to check automatic login. If so, get the data from storage and it will happen directly. Asynchronous

request, there is no need for the user to click on the login event!

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

The above is the detailed content of LocalStorge development implements login, password remembering and automatic login examples. For more information, please follow other related articles on the PHP Chinese website!