Localstorge Development Implementation Login Remember password and auto login instance

The following small series for everyone to bring a login module based on the Localstorge to remember the password and automatic login instance. Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

This is the origin of the module function module, this is the bird Big Maiden show, why say so? One day in the group, a buddy said there is a reverse telecommuting, develop a * * * module, I was itching to chat with him the other day, then, decided to give her to do this module, and he talked about the delivery time, he said the last two days, and then talk about add a, finally reached, 500￥!!! This module in fact, I developed the first night, then I said to him, functional module development OK, to do not remotely view, no problem to pay, a will he back to me, good to send over, and then turned around 500￥, then very surprised, after all, is a virgin show, and then the project to him, and is the perfect delivery , there is no problem with the customer! To think now, still excited Ah! Record that moment--2016-3.

Summary: The transmission of the remember Password and automatic login module, are based on cookies, but the cookie does, there are some drawbacks, the bird saw is the cookie file size is limited, so this is the description is based on H5 on the Storge, local persistent storage to do automatic login and remember the password, So if you do not understand storge, it is recommended to recharge first!

Charging: Understanding Localstorge

Note: This is a copy of the Web page to know the login module, if you want the full source, you can contact the bird OH

：

Core source sharing:

<! DOCTYPE html>
Finally, summarize:

This module is generic, and what we want to do is:

1. When the user clicks Log in, first get the data in the form
2. Make a decision to determine whether the user checked the remember password or automatically login

3. No tick, encrypt the data, send to the server to do the login check, and then return

4. Check the remember password, save the user name password to storge, the core code likes

var storage = Window.localstorage;        Remember the password          if (document.getElementById ("Isremberpwdid"). Checked) {          //store to Loaclstage             //alert (134);          storage["Email" = useremail;          storage["password"] = UserPassword;          storage["isstorepwd"] = "yes";        }        else {          storage["email"] = UserEmail;          storage["isstorepwd"] = "no";        }
Remember, at this point you have checked the remember password, the next time you log on, how to do?

In the $ (function () {}), the browser renders the tag, make a decision to see if storge[' isstorepwd ' is yes, the core code likes

$ (document). Ready (function () {      //read Localstage local storage, populate user name password, if auto login has value to jump directly;/        /instead, jump to this page and wait for login to process        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, it's done!

5. Automatic Login: Does this function still use me to say? And remember the password like!

Next Automatic login          if (document.getElementById ("Isautologinid"). Checked) {          //store to Loaclstage             storage["email"] = UserEmail;          storage["password"] = userpassword;//password stored in storage          storage["isstorepwd"] = "yes";          storage["Isautologin"] = "yes";        }        else {          storage["email"] = UserEmail;          storage["Isautologin"] = "no";        }
When the user login again, or at the time of the load, make a judgment, whether to check the automatic login, tick, get the data from the storage, the direct occurrence of asynchronous

Request, you do not have to make a click Login event!

if ("yes" = = Getisautologin) {if ((""!! = Getemail) | | (Null! = Getemail)) && (""! = getpwd) | | (Null! = GETPWD)))             {//lacoste has saved login information directly to login//alert (' auto login ');            $ ("#email"). Val (Getemail);            $ ("#password"). Val (getpwd);               Window.location= ""; Display at load: Auto login $.ajax ({url: ' loginservlet.ashx ', data: {Email:gete Mail, password:getpwd}, DataType: ' JSON ', success:f                Unction (data) {if (data.msg = = ") {alert (" The account information is abnormal, please verify and re-login ");                  } else {//alert (123);                 Login successful after saving session, if you choose to remember the password, and then save to the local window.location.href = ' default2.aspx ';              }}, Error:function () {Alert ("system error"); }            });