这里我们选择的方法是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. int main(int argc,char *argv[])与int main(int argc,char **argv)区别？

    int main(int argc,char *argv[])与int main(int argc,char **argv)区别? 这两种是一个等价的写法 而int main(int argc,cha ...

  2. esxi导出ovf模板注意事项

    1.网卡配置文件注释掉MAC地址 2.编辑设置,CD/DVD选择客户端设备

  3. day5_集合

    集合也是一种数据类型,一个类似列表东西,它的特点是无序的,不重复的,也就是说集合中是没有重复的数据 集合的作用: 1.它可以把一个列表中重复的数据去掉,而不需要你再写判断---天生去重 2.可以做关系 ...

  4. 树和二叉树->其他(待完善)

    关于树和二叉树的部分,还有如下三个知识点,待以后时间更充裕的时候再回头完善. 1 树与等价问题 文字描述 关于等价关系和等价类的定义,在离散数学上的描述有点拗口, 其实在数据结构中,这部分相关的主要是 ...

  5. LeetCode 888 Fair Candy Swap 解题报告

    题目要求 Alice and Bob have candy bars of different sizes: A[i] is the size of the i-th bar of candy tha ...

  6. 《HTTP - 理解 Content-Type》

    一:引言 在此之前先看一个小例子:(html 上传文件,服务端为PHP) <?php var_dump($_FILES);?> <!DOCTYPE html> <html ...

  7. 机器学习【工具】：Numpy基础

    Numpy Numpy 是 Python 数据科学计算的核心库,提供了高性能的多维数组对象及处理数组的工具 使用方式 import numpy as np 数组 生成数组  简单生成 a = np.a ...

  8. python摸爬滚打之day09----初识函数

    1.函数 把一段公共的代码提取出来通过一个变量(函数名)将这些代码重复调用, 使程序可拓展易维护. def 函数名(形参): 函数体 函数名(实参)  -----> 调用该函数 2.return ...

  9. python基于django编写api+前端后端分离

    有用 https://segmentfault.com/a/1190000016049962#articleHeader2 python的前后端分离(一):django+原生js实现get请求 htt ...

  10. 要继续看Python写算法的内容请到那里去

    由于在这里发文章的时候.莫名其妙的出现公布出去的问题.客服告知是由于链接或者敏感词. 能不能告诉我哪里出了问题?我能够改动,以便再发. 可是,没有人告诉我.仅仅是告诉我不能发. 另外,能不能公布一下敏 ...