这里我们选择的方法是cookie的方式去记录

首先我们写将用户名和密码写到cookie的js代码

//保存到cookie

        function save_cookies(){

            if($("#remember").prop("checked")){

                var username = $("#username").val();

                var password = $("#password").val();

                $.cookie("remember","true",{expires:7});

                $.cookie("username",username,{expires:7 });

                $.cookie("password",password,{expires:7 });

            }else{

                $.cookie("remember","false",{expires:-1});

                $.cookie("username","",{ expires:-1 });

                $.cookie("password","",{ expires:-1 });

            }

        };

注意：$("#id").prop("checked")    通过这个来获取复选框 勾选状态   jquery1.6版本之后用prop方法，之前版本用attr方法。

千万注意prop不要写错，我就把prop写成了porp找了好久的问题，原来是自己把自己坑了。

1.$.cookie("username") 读取cookie 名为username的值

2.$cookie("username","qcbin",{expires:7})  创建cookie 名为username值为qcbin,保存期限为7天。   如果将{expires:7}替换为365意思是，浏览器关闭即清除

写加载cookie的代码，这部分js代码，我们放在head头中，这样我们加载登录页的时候就会先去读cookie。

<script>

        $(document).ready(function(){

            var rem = $.cookie('remember');

            if(rem){

                $("#remember").prop("checked",true);

                $("#username").val($.cookie("username"));

                $("#password").val($.cookie("password"));

            }

        });

    </script>

注意：$(document).ready() 这个方法，浏览器就绪，就开妈执行这个下边的代码。

登录的html示例代码：

<!DOCTYPE html>

<html>

<head lang="en">

   <meta charset="UTF-8">

    <title>login-AM</title>

    <script src="/static/js/jquery-3.2.1.min.js"></script>

    <link href="/static/css/bootstrap3.3.7.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <script src="/static/js/bootstrap3.3.7.min.js"></script>

    <script src="/static/js/jquery.cookie.js"></script>

    <style>

        .form{background: rgba(255,255,255,0.2);width:400px;margin:120px auto;}

        /*阴影*/

        .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}

        input[type="text"],input[type="password"]{padding-left:26px;}

        .checkbox{padding-left:21px;}

    </style>

    <script>

        $(document).ready(function(){

            var rem = $.cookie('remember');

            if(rem){

                $("#remember").prop("checked",true);

                $("#username").val($.cookie("username"));

                $("#password").val($.cookie("password"));

            }

        });

    </script>

</head>

<body>

    <div class="container">

        <div class="form row">

            <div class="form-horizontal col-md-offset-3" id="login_form">

                <h3 class="form-title">LOGIN</h3>

                <div class="col-md-9">

                    <div class="form-group">

                        <i class="fa fa-user fa-lg"></i>

                        <input class="form-control required" type="text" placeholder="Username" id="username" name="username" autofocus="autofocus" maxlength="20"/>

                    </div>

                    <div class="form-group">

                            <i class="fa fa-lock fa-lg"></i>

                            <input class="form-control required" type="password" placeholder="Password" id="password" name="password" maxlength="8"/>

                    </div>

                    <div class="form-group">

                        <label class="checkbox">

                            <input type="checkbox" id="remember" value="1" />记住我

                        </label>

                    </div>

                    <div class="form-group col-md-offset-9">

                        <a  type="button" class="btn btn-primary pull-right" id="register" href="/register/">注册</a>

                        <button  type="button" class="btn btn-success pull-right" id="submit">登录</button>

                    </div>

                    <div class="form-group">

                            <i class="fa fa-exclamation-triangle fa-lg" id="display_text"></i>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script>

        $("#submit").click(function(){

            if($("#username").val()!="" && $("#password").val()!="")

            {

                save_cookies();

                $.ajax({

                    url:'/login_validation/',

                    type:'post',

                    data:{

                        'username':$("#username").val(),

                        'password':$("#password").val()

                    },

                    dataType:'json',

                    success:function(args){

                        if(args.res==1){

                            window.location="/index/";

                        }else{

                            $("#display_text").html("用户名或密码错误.");

                        }

                    },

                    error:function(data){

                        alert('ajax error');

                    }

                });

            }else{

                alert("用户名或密码不能为空。");

            }

        });

     //保存到cookie

        function save_cookies(){

            if($("#remember").prop("checked")){

                var username = $("#username").val();

                var password = $("#password").val();

                $.cookie("remember","true",{expires:7});

                $.cookie("username",username,{expires:7 });

                $.cookie("password",password,{expires:7 });

            }else{

                $.cookie("remember","false",{expires:-1});

                $.cookie("username","",{ expires:-1 });

                $.cookie("password","",{ expires:-1 });

            }

        };

    </script>

</body>

</html>

jquery实现记住用户名和密码的更多相关文章

  1. 通过jquery.cookie.js实现记住用户名、密码登录功能

    Cookies 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jq ...

  2. jQuery cookie 实现记住用户名和密码功能

    jQuery cookie 实现记住用户名和密码功能 HTML代码 <div class="wrap"> <div class="line-top&qu ...

  3. TortoiseGit：记住用户名和密码

    1.背景: 我们在使用 tortoisegit 工具时会无可避免的经常性 pull 和 push,这时通常要输入用户名和密码,由于麻烦,就有人提出了记住用户名和密码的需求... ... 2.设置: [ ...

  4. OpenVPN 如何记住用户名和密码

    最近在使用OpenVPN,但是没有记住用户名和密码功能,太坑人,研究一下发现是可以的. 1. 在OpenVPN安装目录下\OpenVPN\config文件夹中找到vpnserver.ovpn文件. 2 ...

  5. Tortoisegit 记住用户名和密码

    Tortoisegit 记住用户名和密码方法: [Windows系统] 当你配置好git后,在 C:\Documents and Settings\Administrator\ 目录下有一个  .gi ...

  6. ASP.NET中登录时记住用户名和密码（附源码下载）--ASP.NET

    必需了解的:实例需要做的是Cookie对象的创建和对Cookie对象数据的读取,通过Response对象的Cookies属性创建Cookie,通过Request对象的Cookies可以读取Cookie ...

  7. git 记住用户名和密码

    git 记住用户名和密码 在使用 git 时,如果用的是 HTTPS 的方式,则每次提交,都会让输入用户名和密码,久而久之,就会感觉非常麻烦,那么该如何解决呢? 1. 使用 SSH,添加 ssh ke ...

  8. jquery.cookie.js实现cookie记住用户名和密码

    记得导入 <script src="jquery.js" type="text/javascript"></script> <sc ...

  9. SVN记住用户名和密码后如何修改

    今天遇到一个SVN检出代码用户验证问题.由于自己最近参与了好几个项目,一时间忙不过来.所以希望跟着自己的试用期的同事帮我测试一下刚修改完成的新功能是否有问题.但是该同事没有项目中权限,正好今天恰逢星期 ...

随机推荐

  1. 电子产品使用感受之--Windows 10 小米笔记本Air HDMI转VGA无信号问题

    最近一直通过HDMI转VGA线缆链接我的戴尔P2314H显示器,前天睡觉前,看到电脑上英伟达显卡推了驱动更新,顺手更新了一下,就去睡觉了,转天晚上再用,HDMI接口就没有信号了,上网查了一些信息,获知 ...

  2. 宝宝刷 leetcode

    12/3 1.Two Sum Given nums = [2, 7, 11, 15], target = 9, Because nums[0] + nums[1] = 2 + 7 = 9, retur ...

  3. [No000012D]WPF(5/7)依赖属性

    介绍 WPF带来了很多传统 Windows 应用程序没有的新特性和选择.我们已经讨论了一些 WPF 的特性,是时候更进一步介绍其他特性了.当你读完这个系列之前的文章,我希望你已经或多或少地了解了 WP ...

  4. Python：正则表达式

    学习内容参考:Python正则表达式指南 匹配流程 语法表

  5. iOS自定义结构体

    一.提要 通过以官方的CGSize为例,自定义Objective-C中的结构体,并使用. 二.CGSize 1.系统定义的CGSize结构体 struct CGSize { CGFloat width ...

  6. [dpdk] dpdk多线程任务调度

    DPDK下的线程,叫做EAL线程. EAL线程默认是与CPU core一对一绑定的,这样的话,有一些实时性,计算量不高的任务独占CORE是一种浪费,大概找了如下几种解决方案. 1. dpdk seri ...

  7. [daily][archlinux][mdadm][RAID] 软RAID

    一, 使用mdadm创建RAID 参考:https://wiki.archlinux.org/index.php/RAID 1.  安装 mdadm /home/tong [tong@TStation ...

  8. 《HTTP - https》

    一:HTTP 缺点? - 明文通讯(也是最受诟病的一个缺点) - 不验证对方的身份(你说你是你?你怎么证明你是你呢?) - 无法验证报文的完整性,可能已经被篡改(在挨打的边缘,来回试探) 二:HTTP ...

  9. 10种linux下磁盘快照方式恢复系统

    导读 大家都知道windows系统有一个磁盘快照的功能,在windows2003中系统恢复开始依赖于一个叫做硬盘快照服务(Volume Snapshot Service)的服务,他能够自动创建系统快照 ...

  10. zabbix监控托管主机遇到问题

    昨天监控公司的托管主机时发现监控不上,回想起来其实就是个小问题,分分钟能解决的事,排错的过程才是真正耗心费神的. 监控环境: A zabbix server: 192.168.17.110 serve ...