前沿||我是乐于分享，善于交流的鸟窝 先做写一篇关于登录模块中记住密码与自动登录的模块。鸟窝微信：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. 全网最详细的大数据集群环境下多个不同版本的Cloudera Hue之间的界面对比（图文详解）

    不多说,直接上干货! 为什么要写这么一篇博文呢? 是因为啊,对于Hue不同版本之间,其实,差异还是相对来说有点大的,具体,大家在使用的时候亲身体会就知道了,比如一些提示和界面. 安装Hue后的一些功能 ...

  2. rubymine debug需要安装依赖

    for ruby2.x gem install ruby-debug-ide --pre gem install debase --pregem install debugger2 --pre

  3. tsung压力测试——Tsung测试统计报告说明【转】

    1.主要统计信息 Tsung统计数据是平均每十秒重置一次,所以这里的响应时间(连接.请求.页面.会话)是指每十秒的平均响应时间: connect: 表示 每个连接持续时间: Hightest 10se ...

  4. Python模块：time模块详解(转)

    在平常的代码中,我们常常需要与时间打交道.在Python中,与时间处理有关的模块就包括:time,datetime以及calendar.这篇文章,主要讲解time模块. 在开始之前,首先要说明这几点: ...

  5. Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <-错误解决方案

    做项目的时候因为懒,在写service时直接复制了控制器的依赖注入,之后就出现了这个错误,查了半天. 解决其实很简单,删除掉service中注入的$scope即可.

  6. UVa 10129 Play on Words（并查集+欧拉路径）

    题目链接: https://cn.vjudge.net/problem/UVA-10129 Some of the secret doors contain a very interesting wo ...

  7. Netty 启动过程源码分析 （本文超长慎读）(基于4.1.23)

    前言 作为一个 Java 程序员,必须知道Java社区最强网络框架-------Netty,且必须看过源码,才能说是了解这个框架,否则都是无稽之谈.今天楼主不会讲什么理论和概念,而是使用debug 的 ...

  8. Dockerfile构建镜像

    Dockerfile构建镜像的步骤: 从基础镜像运行一个容器 执行一条指令,对容器做出修改 执行类似docker commit的操作,提交一个新的镜像层 再基于刚提交的镜像运行一个新的容器 执行Doc ...

  9. MVC应用jQuery动态产生数据

    在前一篇<MVC应用程序JsonResult()的练习>http://www.cnblogs.com/insus/p/3402042.html中.Insus.NET在练习中学会了在视图中, ...

  10. 山东省第四届acm解题报告（部分）

    Rescue The PrincessCrawling in process... Crawling failed   Description Several days ago, a beast ca ...