Here is the method we have chosen the way to record the cookie
First, we write the user name and password written to the cookie js code
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 };
With prop method, using previous versions attr method $ ( "# id") prop ( "checked") by checking the box to get through this state jquery1.6 version NOTE: After.
Be careful not to prop wrong, I'll prop wrote porp problem for a long time, turned out to be own their own pit.
1. $. Cookie ( "username") reads the value of the cookie named username
2. $ cookie ( "username", "qcbin", {expires: 7}) to create a cookie named username is qcbin, save for a period of 7 days. If {expires: 7} is replaced with 365 means that the browser is closed i.e. Clear
Write the code to load the cookie, this part of the js code, we head on the head, so that when we load the login page will first go read 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 });
Note: $ (document) .ready () this method, the browser is ready, the implementation of the code below will open the mother.
log in html sample code:
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 } the else { 79 $ ( " #display_text " ) .html ( " user name or password. " ); 80 } 81 }, 82 error: function (Data) { 83 Alert ( ' Ajax error ' ); 84 } 85 }); 86 } the else { 87 Alert ( " user name or password is not blank. " ); 88 } 89 }); 90 91 is // save the Cookie 92 function save_cookies () { 93 IF ($ ( " #remember " ) .prop ( " the 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>
Reprinted from: https://www.cnblogs.com/yhleng/p/8582912.html