首页 > 代码库 > 【jQuery】利用jQuery实现“记住我”的功能

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

2024-11-15 00:18:01   202人阅读

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

【2】安装插件：

 

[html] view plain copy
  1. <script type="text/javascript" src=http://www.mamicode.com/"<%=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实现“记住我”的功能


联系
我们