这里我们选择的方法是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. .net webservice的get支持，

    默认创建的webservices.asmx是不支持get的, 如 [WebMethod] public string HelloWorld() { return "Hello World&q ...

  2. 使用djiango 创建网站

    如果发现用户登录异常等情况请不要惊慌,换个浏览器就好了,谷歌有这个问题,也困扰我很久. 如果搭建过程,发现新建topic异常等现象,把不要惊慌,可能是你没有进行数据重新清理,请彻底格式化数据库就好了. ...

  3. composer命令详解

    composer命令行 你已经学会了如何使用命令行界面做一些事情.本章将向你介绍所有可用的命令. 为了从命令行获得帮助信息,请运行composer或者composer list 命令,然后结合--he ...

  4. Web开发——CSS基础

    参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...

  5. 终端：Xcode模拟器上安装.app方法

    有的时候,我们可能需要将别人的Xcode运行之后的程序包(xxx.app)安装在自己的模拟器上,如下我将介绍如何通过终端来安装. 实现 获取自己Xcode生成的xxx.app steps 1:在工程d ...

  6. [X][xrandr][archlinux] 手动调整显示器分辨率

    有一些时候,电脑并不能正确的识别出显示器的最大分辨率,这有可能是软件的原因,硬件的原因,显示器的原因,VGA线的原因等其他原因. 我遇到的情况,是开机时候连着VGA的话,就可以正确识别.如果使用中间进 ...

  7. 如何实现一个字符的反转 （Java）

    一..通过jdk自带reverse的方法.

  8. Java+Selenium 常见问题QA

    一:日期控件二:上传控件三:页面隐藏元素四:弹出窗口的处理五:富文本框编辑器六:元素高亮 一:日期控件selenium不能直接对日期控件操作,可以通过js对日期控件做赋值操作 WebElement i ...

  9. axios的特点有哪些？

    1.axios是一个基于promise的HTTP库,支持promise的所有API: 2.它可以拦截请求和响应: 3.它可以转换请求数据和响应数据,并对响应回来的内容自动转换为json类型的数据: 4 ...

  10. 利用session防止表单重复提交

    转自:http://www.cnblogs.com/xdp-gacl/p/3859416.html 利用Session防止表单重复提交 对于[场景二]和[场景三]导致表单重复提交的问题,既然客户端无法 ...