这里我们选择的方法是cookie的方式去记录
首先我们写将用户名和密码写到cookie的js代码
1 //保存到cookie
2 function save_cookies(){
3 if($("#remember").prop("checked")){
4 var username = $("#username").val();
5 var password = $("#password").val();
6
7 $.cookie("remember","true",{expires:7});
8 $.cookie("username",username,{expires:7 });
9 $.cookie("password",password,{expires:7 });
10 }else{
11 $.cookie("remember","false",{expires:-1});
12 $.cookie("username","",{ expires:-1 });
13 $.cookie("password","",{ expires:-1 });
14 }
15 };
注意：$("#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。
1 $(document).ready(function(){
2 var rem = $.cookie('remember');
3 if(rem){
4 $("#remember").prop("checked",true);
5 $("#username").val($.cookie("username"));
6 $("#password").val($.cookie("password"));
7 }
8 });
注意：$(document).ready() 这个方法，浏览器就绪，就开妈执行这个下边的代码。
登录的html示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>login-AM</title>
6 <script src="/static/js/jquery-3.2.1.min.js"></script>
7 <link href="/static/css/bootstrap3.3.7.min.css" rel="stylesheet">
8 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
9 <script src="/static/js/bootstrap3.3.7.min.js"></script>
10 <script src="/static/js/jquery.cookie.js"></script>
11 <style>
12
13 .form{background: rgba(255,255,255,0.2);width:400px;margin:120px auto;}
14 /*阴影*/
15 .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
16 input[type="text"],input[type="password"]{padding-left:26px;}
17 .checkbox{padding-left:21px;}
18 </style>
19 <script>
20 $(document).ready(function(){
21 var rem = $.cookie('remember');
22 if(rem){
23 $("#remember").prop("checked",true);
24 $("#username").val($.cookie("username"));
25 $("#password").val($.cookie("password"));
26 }
27 });
28 </script>
29 </head>
30 <body>
31 <div class="container">
32 <div class="form row">
33 <div class="form-horizontal col-md-offset-3" id="login_form">
34 <h3 class="form-title">LOGIN</h3>
35 <div class="col-md-9">
36 <div class="form-group">
37 <i class="fa fa-user fa-lg"></i>
38 <input class="form-control required" type="text" placeholder="Username" id="username" name="username" autofocus="autofocus" maxlength="20"/>
39 </div>
40 <div class="form-group">
41 <i class="fa fa-lock fa-lg"></i>
42 <input class="form-control required" type="password" placeholder="Password" id="password" name="password" maxlength="8"/>
43 </div>
44 <div class="form-group">
45 <label class="checkbox">
46 <input type="checkbox" id="remember" value="1" />记住我
47 </label>
48
49 </div>
50 <div class="form-group col-md-offset-9">
51 <a type="button" class="btn btn-primary pull-right" id="register" href="/register/">注册</a>
52 <button type="button" class="btn btn-success pull-right" id="submit">登录</button>
53 </div>
54 <div class="form-group">
55 <i class="fa fa-exclamation-triangle fa-lg" id="display_text"></i>
56 </div>
57 </div>
58 </div>
59 </div>
60 </div>
61 <script>
62
63 $("#submit").click(function(){
64 if($("#username").val()!="" && $("#password").val()!="")
65 {
66 save_cookies();
67 $.ajax({
68 url:'/login_validation/',
69 type:'post',
70 data:{
71 'username':$("#username").val(),
72 'password':$("#password").val()
73 },
74 dataType:'json',
75 success:function(args){
76 if(args.res==1){
77 window.location="/index/";
78 }else{
79 $("#display_text").html("用户名或密码错误.");
80 }
81 },
82 error:function(data){
83 alert('ajax error');
84 }
85 });
86 }else{
87 alert("用户名或密码不能为空。");
88 }
89 });
90
91 //保存到cookie
92 function save_cookies(){
93 if($("#remember").prop("checked")){
94 var username = $("#username").val();
95 var password = $("#password").val();
96
97 $.cookie("remember","true",{expires:7});
98 $.cookie("username",username,{expires:7 });
99 $.cookie("password",password,{expires:7 });
100 }else{
101 $.cookie("remember","false",{expires:-1});
102 $.cookie("username","",{ expires:-1 });
103 $.cookie("password","",{ expires:-1 });
104 }
105 };
106
107
108 </script>
109
110
111 </body>
112 </html>
转载自：https://www.cnblogs.com/yhleng/p/8582912.html