前沿||我是乐于分享，善于交流的鸟窝 先做写一篇关于登录模块中记住密码与自动登录的模块。鸟窝微信：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. Elasticsearch Java Client连接池

    按照Elasticsearch API,在Java端使用是ES服务需要创建Java Client,但是每一次连接都实例化一个client,对系统的消耗很大,即使在使用完毕之后将client close ...

  2. ubuntu图形化配置

    安装图形界面 apt-get install ubuntu-desktop 配置用户目录 udo useradd -s /bin/bash -d /home/wykeinstein -m wykein ...

  3. React 安装

    1.安装 node  8.0以上 node -v npm -v 2.安装淘宝镜像 cnpm npm install -g cnpm --registry=https://registry.npm.ta ...

  4. list、vector、deque互相拷贝

    #include <iostream> #include <stdlib.h> #include <string.h> #include <algorithm ...

  5. Android中Serializable和Parcelable序列化对象详解

    学习内容: 1.序列化的目的 2.Android中序列化的两种方式 3.Parcelable与Serializable的性能比较 4.Android中如何使用Parcelable进行序列化操作 5.P ...

  6. 第三方登录：QQ登录实现（OAuth2.0）

    一.创建应用 1.在 QQ互联 创建应用 地址:https://connect.qq.com/manage.html#/ 然后进行实名认证,创建应用,审核通过 然后点击查看,可以获得 APP ID 和 ...

  7. Makefile中.PHONY的作用

    单词phony (即phoney)的意思是:伪造的,假的.来自collins的解释是: If you describe something as phoney, you disapprove of i ...

  8. js Date对象总结

    Date在js中和Array类似,都是拥有自己的特殊方法的特殊对象. 由于平常用到Date着实不多,对它的了解颇浅.上周被问到怎么样获取某年某个月的天数,我当时想了一会儿,回答说有两种,一种自己写判断 ...

  9. Elasticsearch java客户端调用cat服务

    开发环境,测试环境,预发环境和生产环境一般相互隔离的,使用开发环境或者测试环境可以使用cat来查看索引的情况 例如: 但预防环境和测试环境是不允许访问的,那怎么办呢? 可以使用后台来查看上述信息,提供 ...

  10. RSA实现前端数据加密

    一.前言 一般在登录注册的时候,不能以明文的方式传递数据到后台,如果是http下,很容易被劫持.所以对数据进行加密是常规做法. 二.RSA算法 ”RSA加密算法是一种非对称加密算法.对极大整数做因数分 ...