前沿||我是乐于分享，善于交流的鸟窝 先做写一篇关于登录模块中记住密码与自动登录的模块。鸟窝微信：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. 线程中的同步辅助类Exchanger

    Exchanger 允许两个线程在 collection 点交换对象,它在多流水线设计中是有用的. 允许两条线程之间交换数据.Exchanger的exchange方法是阻塞的,当其他线程也调用了该方法 ...

  2. Identity Server4学习系列四之用户名密码获得访问令牌

    1.简介 Identity Server4支持用户名密码模式,允许调用客户端使用用户名密码来获得访问Api资源(遵循Auth 2.0协议)的Access Token,MS可能考虑兼容老的系统,实现了这 ...

  3. 磁盘分区（20G升50G）

      不多说,直接上干货! 本博文的主要内容有 .磁盘分区的概述 .常用的磁盘管理工具    ./下分5G,给/home扩容    .系统自带的fdisk和parted这两款工具 .磁盘空间管理 前言 ...

  4. MVC源码分析 - Action/Result 过滤器(续)

    上一篇 看到了Action/Result过滤器的执行顺序: OnActionExecuting -> Action -> OnActionExecuted -> OnResultEx ...

  5. 软件架构设计学习总结（18）：MVC三层架构在各框架（jsp+servlet + Struts1+ Struts2+ springMVC）中的特征

    1.基于web开发中最原始的jsp+Servlet   图形化理解jsp+servlet结构: 1.从结构上分析jsp+servlet图解原理: 在基于mvc设计模式下的最原始的jsp+Servlet ...

  6. SPA页面初试

    之前一直很好奇,SPA应用到底是怎么实现的,昨天无意间看到了有一篇介绍的文章,就想着来试一下水(以下根据我的理解所写,可能会让你看的云里雾里,如果想加深了解,最好先了解下window.location ...

  7. Git Windows客户端保存用户名和密码

    解决Git Windows客户端保存用户名和密码的方法,至于为什么,就不想说了. 1. 添加一个HOME环境变量,值为%USERPROFILE% 2. 开始菜单中,点击“运行”,输入“%Home%”并 ...

  8. Apriori算法进行关联分析

    设全集U = {a, b, c, d, e},其元素a,b, c, d, e称为项. 数据集: D = [ {a, b}, {b, c, d}, {d, e}, {b, c, e}, {a,b, c, ...

  9. 网络之XML解析－原生

    Json和XML都属于字符串,用于跨平台,前面总结了下Json,下面看下XML. XML定义这些百度比我说的清,不再啰嗦,直接代码,我喜欢把东西都放进注释. 一.首先看下要解析的XML内容 <? ...

  10. JS中for循环变量作用域--解决for循环异步执行的问题

    被这个问题困惑了很久,终于在网上找到了答案,感谢~ 现在分享给大家~ js中如何让一个for循环走完之后,再去执行下面的语句? 这涉及for循环变量作用域的问题,js中作用域只有函数作用域和全局作用域 ...