这里我们选择的方法是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. python中的str和repr函数的区别

    看了一些网上的解释,最主流的解释是“str是给人看的,repr是给机器看的”,如果已经理解了的,这句话是对的,但是是有问题的,对于没懂的,这句话是无法理解的. 我来尝试解释一下.先直译一下官方文档: ...

  2. mapReducer 去重副的单词

    需求是: 统计输出某目录文件的所有单词,去除重复的单词. mapper阶段正常做map工作,映射. 切割单词. <key,value> -->  <word,nullWrita ...

  3. 在ubuntu系统中，python依赖存放的路径

    你在使用python,之后你想给python安装一些第三方库,如tensorflow或者tensorrt,那么这些包存放在哪个路径下呢? 该目录下: /usr/local/lib/python3.5/ ...

  4. MongoDB win10 安装教程（zip）

    1.创建文件夹,如下: D:\Program File\mongodb D:\Program File\mongodb\data D:\Program File\mongodb\data\db D:\ ...

  5. 原来的ALL IN ONE架构，快速的演进成为SOA架构

    原来的ALL IN ONE架构,快速的演进成为SOA架构 京东服务市场高并发下SOA服务化演进架构 原创: 张俊卿 京东技术 今天

  6. java JDBC (六) org.apache.commons.dbutils 增删改

    dbutils是apache封装了JDBC的工具类,比mysql-connector更方便些 下载地址:http://commons.apache.org/proper/commons-dbutils ...

  7. Win7 开机自动启动Outlook2010

    工作中,设置一些开机启动项,可以提供工作效率,下面演示设置Outlook2010在win7系统开机自启动,其它软件,如Eclipse.微信等,也可以这么配置. 环境: win7,outlook 201 ...

  8. caffe matlab接口编译遇到的问题记录

    今天编译的过程中遇到的问题以及查阅到的资料,记录在这里,希望可以帮到其他人. BVLC的caffe源码,如果要编译matlab的接口时,首先需要将makefile.config文件中的matlab的安 ...

  9. python脚本获取文件的创建于修改日期并计算时间差

    由于在计算一个算法的运行时间的时候,需要将文件的创建日期与修改日期读取到,然后计算两者之差,在网上搜索了相关的程序之后,自己又修改了一下,把代码贴在这里,供以后查阅使用,也希望可以帮到其他人. # - ...

  10. JavaScript深度克隆

    深度克隆函数: function deepClone(obj){ var str = ""; var newobj = obj.constructor === Array ? [] ...