LocalStorge development implements login, password remembering and automatic login examples-C#.Net Tutorial-php.cn

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:

<!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(&#39;正在自动登录&#39;); 
            $("#email").val(getEmail);
            $("#password").val(getPwd);
            // window.location="";   
            //加载时显示：正在自动登录 
            $.ajax({
              url: &#39;LoginServlet.ashx&#39;,
              data: {
                email: getEmail,
                password: getPwd
              },
              
              dataType: &#39;json&#39;,
              success: function (data) {
                if (data.msg == "") {
                  alert("账号信息异常，请核实后重新登录");
                } else {
                  //alert(123);
                  //登录成功后保存session，如果选择了记住密码，再保存到本地 
                  window.location.href =&#39;Default2.aspx&#39;; 
                }
              },
              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: &#39;LoginServlet.ashx&#39;,
          data: {
            "email": userEmail,
            "password": userPassWord
          },
          dataType: &#39;json&#39;,
          success: function (data) {
            if (data.msg == "") {
              alert("用户名或密码错误");
            } else {
              alert("登陆成功");
              //登录成功后保存session，如果选择了记住密码，再保存到本地 
              window.location.href = &#39;Default.aspx&#39;;
            }
          },
          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=&#39;js/particles.js&#39; type="text/javascript"></script>
  <script src=&#39;js/background.js&#39; type="text/javascript"></script>
  <script src=&#39;js/jquery.min.js&#39; type="text/javascript"></script>
  
  <script src=&#39;js/layer/layer.js&#39; type="text/javascript"></script>
  <script src=&#39;js/index.js&#39; type="text/javascript"></script>

</body>
</html>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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(&#39;正在自动登录&#39;); 
            $("#email").val(getEmail);
            $("#password").val(getPwd);
            // window.location="";   
            //加载时显示：正在自动登录 
            $.ajax({
              url: &#39;LoginServlet.ashx&#39;,
              data: {
                email: getEmail,
                password: getPwd
              },
              
              dataType: &#39;json&#39;,
              success: function (data) {
                if (data.msg == "") {
                  alert("账号信息异常，请核实后重新登录");
                } else {
                  //alert(123);
                  //登录成功后保存session，如果选择了记住密码，再保存到本地 
                  window.location.href =&#39;Default2.aspx&#39;; 
                }
              },
              error: function () {
                alert("系统错误");
              }
            });

Copy after login

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!