前沿||我是乐于分享，善于交流的鸟窝 先做写一篇关于登录模块中记住密码与自动登录的模块。鸟窝微信：jkxx123321

关于这个模块功能模块的由来，这是鸟大大的处女秀，为什么这么说呢？一天在群里，一个哥们说有私活，开发一个****模块，我那天手痒痒就和他聊了两句，然后，就决定给她做这个模块了，和他谈了谈交付时间，他说最迟两天，然后谈了谈加个，最后达成，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">

    <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" class="active">登录</a>

                    <a href="register.html">注册</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 />

                        记住密码&nbsp;

                    </label>

                    <label for="autologin" class="forgot-password">

                        <input type="checkbox" name="isAutoLoginId" id="isAutoLoginId" class="remember-mecheck" checked />

                        自动登录&nbsp;

                    </label>

                </div>

            </form>

        </div>

    </div>

    <div class="footer">

        <p>仿知乎 - Thousands Find</p>

        <p>copy@*.*  </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开发登录模块的记住密码与自动登录的更多相关文章

  1. php中实现记住密码下次自动登录的例子

    这篇文章主要介绍了php中实现记住密码下次自动登录的例子,本文使用cookie实现记住密码和自动登录功能,需要的朋友可以参考下 做网站的时候经常会碰到要实现记住密码,下次自动登录,一周内免登陆,一个月 ...

  2. WinForm应用程序的开机自启、记住密码，自动登录的实现

    一.思路: 1.开机自启,自然是需要用到注册表,我们需要把程序添加到电脑的注册表中去 2.记住密码,自动登录,开机自启,在页面的呈现我们都使用复选框按钮来呈现 3.数据持久化,不能是数据库,可以是sq ...

  3. C# Winform 登录中的忘记密码及自动登录

    本地保存登录账号实现忘记密码及自动登录 #region 删除本地自动登录及记住密码信息 /// <summary> /// 删除本地自动登录及记住密码信息 /// </summary ...

  4. 一个简单WPF登陆界面，包含记住密码，自动登录等功能，简洁美观

    简介:这是一个自己以前用WPF设计的登陆界面,属于一个实验性的界面窗体,如果用于产品还很有不足.但也是有一点学习价值.后台代码略有复杂,但基本上都有注释 分类,略有代码经验的一般都能看懂. 登陆界面外 ...

  5. 数据加密实战之记住密码、自动登录和加密保存数据运用DES和MD5混合使用

    MD5的简介:MD5即Message-Digest Algorithm 5(信息-摘要算法5),用于确保信息传输完整一致.是计算机广泛使用的杂凑算法之一(又译摘要算法.哈希算法),主流编程语言普遍已有 ...

  6. Android 记住密码和自动登录界面的实现（SharedPreferences 的用法）

    原文:http://blog.csdn.net/liuyiming_/article/details/7704923 SharedPreferences介绍: SharedPreferences是An ...

  7. cookie、session及实现记住密码，自动登录

    在登录帐号.密码框下,有三种帐号登录模式可供选择,用户可根据自己的具体情况选择其中一种适合自己的模式. 1.网吧模式:勾选网吧模式后,登录的帐号会在歪歪注销/退出的时候自动清除,不会留在登录框中,可以 ...

  8. Cookie实现记住密码、自动登录

    前端代码 <form id="form" action="xxx" method="post"> <div> < ...

  9. Android之记住密码与自动登陆实现

    本文主要讲述了利用sharedpreference实现记住密码与自动登陆功能 根据checkbox的状态存储用户名与密码 将结果保存在自定义的application中,成为全局变量 布局文件 < ...

随机推荐

  1. django2笔记:路由path语法

    django2笔记:路由path语法 9月23,Django 发布了2.0a1版本,这是一个 feature freeze 版本,如果没有什么意外的话,2.0正式版不会再增加新的功能了.按照以往的规律 ...

  2. Thrift 基础(C++ rpc )

    一.thrift简介 thrift是Facebook开源的一套rpc框架,目前被许多公司使用 我理解的特点 使用IDL语言生成多语言的实现代码,程序员只需要实现自己的业务逻辑 支持序列化和反序列化操作 ...

  3. SpringBoot用@ConfigurationProperties获取配置文件值

    SpringBoot的配置文件有yml和properties两种,看一些文章说yml以数据为中心,比较好.个人觉得properties更好用,所以这里以properties格式为例来说. 我们都知道@ ...

  4. 简单的字母全排列问题—递归法和STL法

    问题描述:求全由小写字母组成的不超过200个字符序列的全排列 如输入序列bbjd,排列结果为: bbdj bbjd bdbj bdjb bjbd bjdb dbbj dbjb djbb jbbd jb ...

  5. WebMagic之爬虫监控

    访问我的博客 前言 年前闲着无聊,研究了一阵子爬虫技术,接触到爬虫框架 WebMagic,感觉很好用. 在之后的工作中,接手了新站与第三方接口对接的工作,主要的工作是去抓取对方接口的内容:初始的时候, ...

  6. python服务器环境搭建Flask，uwsgi和nginx

    python服务器环境搭建Flask,uwsgi和nginx 环境配置 服务器配置  [部署系统环境Ubuntu] 使用python的Flask框架搭建好网页后台后,便要开始将网站部署到服务器平台了. ...

  7. 【SpringBoot系列1】SpringBoot整合MyBatis

    前言: 一直看网上说SpringBoot是解锁你的配置烦恼,一种超级快速开发的框架.一直挺想学的,正好最近也有时间,就学了下 这个是SpringBoot整合MyBatis的一个教程,用了阿里的drui ...

  8. 并发编程之 Semaphore 源码分析

    前言 并发 JUC 包提供了很多工具类,比如之前说的 CountDownLatch,CyclicBarrier ,今天说说这个 Semaphore--信号量,关于他的使用请查看往期文章并发编程之 线程 ...

  9. 我进行jvm内存调优的一些记录

    jvm内存调优的一些记录 java内存调优的方法和过程 可以使用 jmap -heap pid号 查看,例如pid是9300,执行的结果可能是这样的. root@ubuntu:~# jmap -hea ...

  10. 以ORM的思路来从Excel文件中读取JSON数据列表

    1.一个常见的问题就是如何读取excel. 这里面有几个分支的问题,一个是如何使用poi读取excel,网上例子很多,但是这只解决了第一步.如何将excel读取入一定的数据结构这是第二个问题,还有就是 ...