這里我們選擇的方法是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>