其他分享
首页 > 其他分享> > 转:jquery实现记住用户名和密码

转:jquery实现记住用户名和密码

作者:互联网

这里我们选择的方法是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

标签:jquery,username,用户名,remember,val,expires,密码,cookie,password
来源: https://www.cnblogs.com/fudanchencds/p/12559419.html