基于localStorge开发登录模块的记住密码与自动登录实例

2024-10-13 07:58:30

关于这个模块功能模块的由来，这是鸟大大的处女秀，为什么这么说呢？一天在群里，一个哥们说有私活，开发一个****模块，我那天手痒痒就和他聊了两句，然后，就决定给她做这个模块了，和他谈了谈交付时间，他说最迟两天，然后谈了谈加个，最后达成，500￥！！！这个模块其实第一天晚上我就开发出来了，那时我给他微信说，功能模块开发ok了，要不要远程查看一下，没问题的话就交了，一会他回我，好了就发过来，然后微信就转过来500￥，当时很诧异，毕竟是处女秀，然后就把项目交给他了，并且是完美交付，在客户那里，也没有出现问题！到如今想想，还激动啊！记录那个时刻--2016-3。

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

充电：了解localstorge

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

效果图：

核心源码分享：

<!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('正在自动登录');
            $("#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("系统错误");
              }
            });
          }
        }
        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: 'LoginServlet.ashx',
          data: {
            "email": userEmail,
            "password": userPassWord
          },
          dataType: 'json',
          success: function (data) {
            if (data.msg == "") {
              alert("用户名或密码错误");
            } else {
              alert("登陆成功");
              //登录成功后保存session，如果选择了记住密码，再保存到本地
              window.location.href = 'Default.aspx';
            }
          },
          error: function () {
            alert("系统错误1");
          }
        });
        //alert("登录成功");
      }
      else {
        alert("用户名密码不能为空");
      }
    }

  </script>
</head>
<body>
  <div id="box"></div>
  <div class="cent-box">
    <div class="cent-box-header">
      <h1 class="main-title hide">仿知乎</h1>
      <h2 class="sub-title">生活热爱分享 - Thousands Find</h2>
    </div>

    <div class="cont-main clearfix">
      <div class="index-tab">
        <div class="index-slide-nav">
          <a href="login.html" rel="external nofollow" class="active">登录</a>
          <a href="register.html" rel="external nofollow" >注册</a>
          <div class="slide-bar"></div>
        </div>
      </div>
      <form id="loginform" name="loginform" autocomplete="on" method="post">
        <div class="login form">
          <div class="group">
            <div class="group-ipt email">
              <input type="email" name="email" id="email" class="ipt" placeholder="邮箱地址" required/>
            </div>
            <div class="group-ipt password">
              <input type="password" name="password" id="password" class="ipt" placeholder="输入您的登录密码" required/>
            </div>

          </div>
        </div>

        <div class="button">
          <button type="button" class="login-btn register-btn" id="button" onclick="login()">登录</button>
        </div>

        <div 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>

        </div>
      </form>
    </div>
  </div>

  <div class="footer">
    <p>仿知乎 - Thousands Find</p>
    <p>copy@*.* 2016</p>
  </div>

  <script src='js/particles.js' type="text/javascript"></script>
  <script src='js/background.js' type="text/javascript"></script>
  <script src='js/jquery.min.js' type="text/javascript"></script>

  <script src='js/layer/layer.js' type="text/javascript"></script>
  <script src='js/index.js' type="text/javascript"></script>

</body>
</html>

最后总结一下：

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

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

以上这篇基于localStorge开发登录模块的记住密码与自动登录实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

基于localStorge开发登录模块的记住密码与自动登录实例

关于这个模块功能模块的由来,这是鸟大大的处女秀,为什么这么说呢?一天在群里,一个哥们说有私活,开发一个****模块,我那天手痒痒就和他聊了两句,然后,就决定给她做这个模块了,和他谈了谈交付时间,他说最迟两天,然后谈了谈加个,最后达成,500￥!!!这个模块其实第一天晚上我就开发出来了,那时我给他微信说,功能模块开发ok了,要不要远程查看一下,没问题的话就交了,一会他回我,好了就发过来,然后微信就转过来500￥,当时很诧异,毕竟是处女秀,然后就把项目交给他了,并且是完美交付,在客户那里,也没有出现
Android SharedPreferences实现记住密码和自动登录

本文实例为大家分享了Android SharedPreferences实现记住密码和自动登录,供大家参考,具体内容如下效果图: 第一次进入进来勾选记住密码和自动登录成功后,第二次进来说明:中间存在的图片或者多余的其他部分可删掉.留下最主要的填写部分和登陆按钮即可.功能还是可以实现的. XML文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="h
Android SharedPreferences实现记住密码和自动登录界面

SharedPreferences介绍: SharedPreferences是Android平台上一个轻量级的存储类,主要是保存一些常用的配置参数,它是采用xml文件存放数据的,文件存放在"/data/data<package name>/shared_prefs"目录下. SharedPreferences的用法: 由于SharedPreferences是一个接口,而且在这个接口里没有提供写入数据和读取数据的能力.但它是通过其Editor接口中的一些方法来操作Shared
php中实现记住密码下次自动登录的例子

做网站的时候经常会碰到要实现记住密码,下次自动登录,一周内免登陆,一个月内免登陆这种需求.这种功能一般都是通过cookie来实现的.本篇文章将简单说一下如何使用php实现该需求的.当然实现该需求的方法有N多种. 整个过程就是用户在登陆的时候,如果选择了记住密码或者一周内免登陆等这个选项的时候,则在用户成功登陆操作完成之后,存储一个实现自动登录的cookie的数据到数据库的用户表里面,作为下次自动登录时验证用.验证通过则自动登录,否则需要输入用户名,密码进行登录.保存的这个cookie值则可以取一
asp.net利用cookie保存用户密码实现自动登录的方法

本文实例讲述了asp.net利用cookie保存用户密码实现自动登录的方法.分享给大家供大家参考.具体分析如下: 在asp.net中可以用cookie保存用户的帐户密码实现自动登录的功能,但是需要强调一下,cookie在客户端保存,是不安全的,推荐使用md5加密保存. 下面分析一下在asp.net中cookie的创建.提取与销毁的方法: 创建cookie 复制代码代码如下: //向客户端写入Cookie HttpCookie hcUserName1 = new HttpCookie("unam
JavaWeb开发使用Cookie创建-获取-持久化、自动登录、购物记录、作用路径

1.cookie是啥?随手百度了网友的说说简单的说,Cookie就是服务器暂存放在你计算机上的一笔资料,好让服务器用来辨认你的计算机.当你在浏览网站的时候,Web服务器会先送一小小资料放在你的计算机上,当下次你再光临同一个网站,Web服务器会先看看有没有它上次留下的Cookie资料,有的话,就会依据Cookie里的内容来判断使用者,送出特定的网页内容给你. 2.cookie在哪里? 3.cookie可以删除吗? 4.cookie实现原理第一次请求浏览器,在浏览器的cookie存储区,没有co
Python使用selenium实现网页用户名密码验证码自动登录功能

好久没有学python了,反正各种理由吧(懒惰总会有千千万万的理由),最近网上学习了一下selenium,实现了一个简单的自动登录网页,具体如下. 1.安装selenium: 如果你已经安装好anaconda3,直接在windows的dos窗口输入命令安装selenium: python -m pip install --upgrade pip 查看版本pip show selenium 2.接着去http://chromedriver.storage.googleapis.com/index.
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能（含后台代码）

需要引入插件jquery.md5.js 可直接在IIS下运行: 用户名:Ethan.zhu 密码:123456789 完整文件下载:WebApplication1_jb51.rar 首先将按钮单击事件的异步验证提取出来作为一个单独的函数,需要将按钮单击事件里面的变量提取出来定义为全局变量,并且增加一个变量editPass(用来标记是自己输入密码,还是从cookies中读取的密码) 复制代码代码如下: var wrongTypeName, //用户名的错误类型,可以直接作为错误提示信息数组的下
Android开发笔记SQLite优化记住密码功能

本文实例为大家分享了Android SQLite优化记住密码功能的具体代码,供大家参考,具体内容如下 package com.example.alimjan.hello_world; /** * Created by alimjan on 7/4/2017. */ import com.example.alimjan.hello_world.bean.UserInfo; import com.example.alimjan.hello_world.dataBase.UserDBHelper; i
android实现记住用户名和密码以及自动登录

毕业刚开始上班接触的第一个项目移动护士站,接到了第一任务就是登录,要用到自动登录功能,所以在这做个记录,以后用的时候直接来粘贴复制,废话少说,直奔主题先上一下效果图,由于只是实现功能,界面没有美化,见谅由于xml文件内容,就不展现在这了,自己写一写就好,爸妈再也不用担心我的学习了,so easy package com.sdufe.login; import android.app.Activity; import android.content.Context; import androi

基于localStorge开发登录模块的记住密码与自动登录实例

相关推荐

随机推荐