这里我们选择的方法是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. hadoop 0.20.2伪分布式安装详解

    adoop 0.20.2伪分布式安装详解 hadoop有三种运行模式: 伪分布式不需要安装虚拟机,在同一台机器上同时启动5个进程,模拟分布式. 完全分布式至少有3个节点,其中一个做master,运行名 ...

  2. CCPC-Wannafly Winter Camp Day1 Div1 - 夺宝奇兵 - [贪心+线段树]

    题目链接:https://zhixincode.com/contest/3/problem/J?problem_id=43 样例输入 1 4 1110 11 110 21 210 31 315 415 ...

  3. 【魔改】hdu6325 多校赛3G xy排序凸包+llvector模板

    凸包算法前的预处理,可以极角排序,也可以按X,Y轴排序, 极角排序需要找到角落里的一个点,Xy轴排序要跑两遍凸包 而本题的要求只要一个上半凸包,并且有X轴从小到大以及字典序限制,完全符合xy排序,直接 ...

  4. [cloud][ovs][sdn] 安装 openvswitch-dpdk

    [cloud][OVS][sdn] Open vSwitch 初步了解 继之前的内容,安装基于dpdk的ovs https://docs.openvswitch.org/en/latest/intro ...

  5. kibana设置mapping

    demo: PUT linewell_assets_mgt_fz_es/lw_devices/_mapping { "properties": { "update_tim ...

  6. java System类的一些静态方法

    package cn.sasa.demo2; public class SystemDemo { public static void main(String[] args) { func_array ...

  7. 关于 Data URI Scheme -- data:image/jpg;base64

    转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...

  8. tail命令 输出文件后n行，默认查看文件的后10行

    默认查看文件的后10行 -n 3 数字   也可以忽略-n 直接加数字 tail 3 查看文件后3行 [root@localhost ~]# tail /etc/passwd // 默认查看文件的后十 ...

  9. 前端 HTML form表单标签 textarea标签 多行文本

    <textarea></textarea>作用:允许用户录入多行数据到表单控件中 <!DOCTYPE html> <html lang="en&qu ...

  10. centos安装卸载Postgresql数据库PGSQL10

    这几天ytkah正在测试Odoo,而Odoo12一定要PGSQL10否则安装数据库的时候会出错,所以就直接安装gpsql10.首先卸载旧版本postgresql yum remove postgres ...