jquery.cookie组件小总

谁践踏了优雅 2022-06-13 06:57 172阅读 0赞

今天分享的是 jquery.cookie:这是一个轻量级的cookie插件，可以从浏览器上创建，读取，写入，删除cookie；当然cookie虽然是保存在浏览器上，但是一定要上传到服务器才能看到结果；

下载地址：http://www.jq22.com/   进入后搜索jquery.cookie就行；

无论是B/S还是C/S,实际开发中，我觉得用到cookie最多的地方就是登录页记住密码

下面我介绍一下这个插件的几个属性：

step 1：创建cookie

$.cookie('the\_cookie', 'the\_value');有两个参数，**一个是你创建的cookie的名称，第二个是你要往cookie里面存的值；****当然，上面这种写法创建的cookie的生命周期是浏览器关闭为止；**

**$.cookie('the\_cookie', 'the\_value', \{ expires: 7 \}); 第三个参数是你创建cookie的生命周期，单位为天**

<table style="border-spacing:0px; border-collapse:collapse; width:768px; font-size:15px; color:rgb(51,51,51); orphans:2; widows:2; border:0px!important; bottom:auto!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; min-height:auto!important; background:none!important"> 
 <tbody style="border:0px!important; bottom:auto!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:none!important"> 
  <tr style="font-weight:bold; color:rgb(0,0,0); border:0px!important; bottom:auto!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background:rgb(234,249,255)"> 
   <td style="width:751px; padding:0px!important; border:0px!important; bottom:auto!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; min-height:auto!important; background:none!important"> 
    <div style="padding:0px!important; margin:0px!important; width:auto!important; border:0px!important; bottom:auto!important; height:auto!important; left:auto!important; line-height:1.3em!important; outline:0px!important; overflow:visible!important; position:relative!important; right:auto!important; top:auto!important; vertical-align:baseline!important; min-height:auto!important; background-color:initial!important"> 
     <div style="border:0px!important; bottom:auto!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:pre!important; background-color:initial!important"> 
      <span style="font-family:Microsoft YaHei; font-size:18px"><code style="padding:0px!important; color:rgb(53,63,93)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background-color:initial!important">$.cookie(</code><code style="padding:0px!important; color:rgb(25,171,0)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background-color:initial!important">'the_cookie'</code><code style="padding:0px!important; color:rgb(53,63,93)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background-color:initial!important">,&nbsp;</code><code style="padding:0px!important; color:rgb(25,171,0)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background-color:initial!important">'the_value'</code><code style="padding:0px!important; color:rgb(53,63,93)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background-color:initial!important">,&nbsp;{&nbsp;expires:&nbsp;7,&nbsp;path:&nbsp;</code><code style="padding:0px!important; color:rgb(25,171,0)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background-color:initial!important">'/'</code>&nbsp;<code style="padding:0px!important; color:rgb(53,63,93)!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; background-color:initial!important">});</code></span> 
     </div> 
     <div style="border:0px!important; bottom:auto!important; height:auto!important; left:auto!important; line-height:1.3em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:pre!important; background-color:initial!important"> 
      <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:微软雅黑; font-size:16px; line-height:28.8px; orphans:2; widows:2"> 注：在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设&nbsp;</p> 
      <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:微软雅黑; font-size:16px; line-height:28.8px; orphans:2; widows:2"> 置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这&nbsp;<br style=""> </p> 
      <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:微软雅黑; font-size:16px; line-height:28.8px; orphans:2; widows:2"> 个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突） 。&nbsp;<br style=""> </p> 
      <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:微软雅黑; font-size:16px; line-height:28.8px; orphans:2; widows:2"> 4.读取cookie：&nbsp;</p> 
      <br> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**step 2:读取cookie**

**如果你想读取cookie，你则是根据你设置的cookie的名称来读取**

**$.cookie("the\_cookie");**

**step 3:删除cookie**

**删除cookie其实就是变相的创建cookie的一个过程，上面我们创建cookie时直接保存了对应要保存的值，那么删除cookie其实就是保存时赋值为空；**

**$.cookie("the\_cookie",null)//官网上的这种写法我不太支持，因为我试过，当给cookie赋值为努力时，下次登录的时候，浏览器会直接把null拿出来放到对应的位置，并不算是彻底的删除了cookie；所以我推荐的写法是：**

**$.cookie("the\_cookie","");**

**==========================================================================================**

**下面是几个不太常用的参数，大概做一介绍，实际开发中完全可以不用：**

1).expires: 365

定义cookie的有效时间，值可以是一个数字（从创建cookie时算起，以天为单位）或一个Date 对

象。如果省略，那么创建的cookie是会话cookie，将在用户退出浏览器时被删除。

2).path: '/'

默认情况：只有设置cookie的网页才能读取该cookie。

定义cookie的有效路径。默认情况下， 该参数的值为创建 cookie 的网页所在路径（标准浏览器的行为） 。

如果你想在整个网站中访问这个cookie需要这样设置有效路径：path: '/'。如果你想删除一个定义

了有效路径的 cookie，你需要在调用函数时包含这个路径:$.cookie('the\_cookie', null,

\{ path: '/' \});。 domain: 'example.com'

默认值：创建 cookie的网页所拥有的域名。

3).secure: true

默认值：false。如果为true，cookie的传输需要使用安全协议（HTTPS）。

4).raw: true

默认值：false。

默认情况下，读取和写入 cookie 的时候自动进行编码和解码（使用encodeURIComponent 编码，

decodeURIComponent 解码）。要关闭这个功能设置 raw: true 即可。

**============================================================================================**

**下面我给大家把我开发过程中的一段代码写出来，可以供大家参考：**

**项目背景：springMVC+spring data jpa**

**开发模块：登录时记住密码功能**

**step 1：导入相关包**

**<script src="res/skin/default/js/jquery-1.8.3.min.js"></script>**

**<script type="text/javascript" src="res/skin/default/js/jquery.cookie.js"></script>**

**step 2：jsp代码**

**<input type="text" id="userName" name="userName" placeholder="请输入账号/电话号码/别名"/>**

**<input type="passWord" id="passWord" name="passWord" placeholder="请输入密码"/>**

**<input id="rememberPassword" type="checkbox";">记住密码**

**step 3:jquery代码**

**<script>  
  
//step 1:当鼠标点击复选框时，创建一个持久化的cookie**

**var userName=null;**

**var passWord=null;**

** //限制为：鼠标点击登录时判断：**

** $("\#submit").click(function()\{  
 //如果被选中状态，则创建cookie**

**if($("\#rememberPassword").attr("checked"))\{  
//创建cookie，并将用户名和密码保存进去**

**$.cookie('userName',$('\#userName').val(), \{ expires: 7\});**

**$.cookie('passWord',$('\#passWord').val(), \{ expires: 7\});  
\}else\{**

**//如果复选框没有被选中，则删除cookie  
  
$.cookie('userName', ""); **

**$.cookie('passWord', ""); **

**\}**

**    \});  
 **

**//页面每次被加载的时候，都把cookie中的值取出来，然后存放到对应的文本框中  
 $(function()\{**

**   
 var userName=$.cookie('userName');**

**var passWord=$.cookie('passWord');  
  
$("\#userName").val(userName);**

**$("\#passWord").val(passWord);**

** if(userName!=null&&userName!=""&&passWord!=null&&passWord!="")\{**

**$("\#rememberPassword").attr("checked",true);**

**\}  
  
\}); **

**</script>**

jquery.cookie组件小总

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关小程序input组件禁用键盘

相关小程序web-view组件

相关 jquery.cookie组件小总

相关 jBoot小总

相关 Maven小总

相关小程序slider组件

相关小程序webview组件实践

相关 React Native Switch 组件大小

相关小程序中关于moment组件（小程序里面不能使用moment组件）

相关小程序 view、scroll-view组件