jQuery利用jQuery实现“记住我”的功能

Posted 2020-09-30 David Wu

【1】先下载jQuery.cookie插件：使用帮助请参考链接(https://github.com/carhartl/jquery-cookie)。

【2】安装插件：

 

[html] view plain copy

1. <script type="text/javascript" src="<%=basePath%>ie6/crm2/js/lib/cookies/jquery.cookie.js"></script>  

【3】功能逻辑：

 

[javascript] view plain copy

1. //判断之前是否有设置cookie，如果有，则设置【记住我】选择框  
2.     if($.cookie(‘absms_crm2_userName‘)!=undefined){  
3.         $("#rememberMe").attr("checked", true);  
4.     }else{  
5.         $("#rememberMe").attr("checked", false);  
6.     }  
7.       
8.     //读取cookie  
9.     if($(‘#rememberMe:checked‘).length>0){  
10.         $(‘#userName‘).val($.cookie(‘absms_crm2_userName‘));  
11.         $(‘#password‘).val($.cookie(‘absms_crm2_password‘));  
12.     }  
13.       
14.     //监听【记住我】事件  
15.     $("#rememberMe").click(function(){  
16.         if($(‘#rememberMe:checked‘).length>0){//设置cookie  
17.             $.cookie(‘absms_crm2_userName‘, $(‘#userName‘).val());  
18.             $.cookie(‘absms_crm2_password‘, $(‘#password‘).val());  
19.         }else{//清除cookie  
20.             $.removeCookie(‘absms_crm2_userName‘);  
21.             $.removeCookie(‘absms_crm2_password‘);  
22.         }  
23.     });  

【4】使用

[html] view plain copy

1. <tr>  
2.     <td width="60">账  号：</td>  
3.     <td width="244"><input id="userName" name="userName" type="text" class="inp_01" /></td>  
4.   </tr>  
5.   <tr>  
6.     <td>密  码：</td>  
7.     <td><input id="password" name="password" type="password" class="inp_01" /></td>  
8.   </tr>  
9.   <tr>  
10.     <td> </td>  
11.     <td><input id="rememberMe" type="checkbox"/> 记住我</td>  
12.   </tr>