【jQuery】利用jQuery實現“記住我”的功能

標籤：log   ace   fine   move   false   ring   alt   實現   com   

【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> 
    

【jQuery】利用jQuery實現“記住我”的功能