码迷，mamicode.com
首页 > Web开发 > 详细

jquery.cookie中的操作

时间：2015-07-20 18:18:28      阅读：141      评论：0      收藏：0      [点我收藏+]

标签：

jquery.cookie中的操作：

jquery.cookie.js是一个基于jquery的插件，点击下载！

创建一个会话cookie：

$.cookie(‘cookieName’,‘cookieValue’);

注：当没有指明cookie时间时，所创建的cookie有效期默认到用户浏览器关闭止，故被称为会话cookie。

创建一个持久cookie：

$.cookie(‘cookieName’,‘cookieValue’，｛expires：7｝);

注：当指明时间时，故称为持久cookie，并且有效时间为天。

创建一个持久并带有效路径的cookie：

$.cookie(‘cookieName’,‘cookieValue’，｛expires：7，path：’/‘｝);

注：如果不设置有效路径，在默认情况下，只能在cookie设置当前页面读取该cookie，cookie的路径用于设置能够读取cookie的顶级目录。

创建一个持久并带有效路径和域名的cookie：

$.cookie(‘cookieName’,‘cookieValue’，｛expires：7，path：’/‘，domain: ‘chuhoo.com’，secure: false，raw:false｝);

注：domain： 创建cookie所在网页所拥有的域名；secure：默认是false，如果为true，cookie的传输协议需为https；raw：默认为 false，读取和写入时候自动进行编码和解码（使用encodeURIComponent编码，使用decodeURIComponent解码），关闭 这个功能，请设置为true。

获取cookie：

$.cookie(‘cookieName’);   //如果存在则返回cookieValue，否则返回null。

删除cookie：

$.cookie(‘cookieName’,null);

注：如果想删除一个带有效路径的cookie，如下：$.cookie(‘cookieName’,null,{path:’/‘});

 

----------相关参数的解释---------------

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 即可。

 

 

较复杂一点的例子：

 

Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。

 

例如购物网站存储用户曾经浏览过的产品列表，或者门户网站记住用户喜欢选择浏览哪类新闻。 在用户允许的情况下，还可以存储用户的登录信息，使得用户在访问网站时不必每次都键入这些信息？

 

怎么在js/jquery中操作处理cookie那？今天分享一个cookie操作类--jQuery.Cookie.js，是一个轻量级的Cookie管理插件。

 

Cookie下载地址： http://plugins.jquery.com/project/cookie.

 

特别提醒，今日发现一个特别的错误，google浏览器提示：has no method $.cookie。火狐浏览器提示:$.cookie is not a function;调试了半天，终于找到原因，如果同一个页面两次或者多次引入Jquery插件就会报此错误。

 

　　使用方法：

 

　　1、引入jQuery与jQuery.Cookie.js插件。

 

复制代码 代码如下:

 


<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>

 

2.将cookie写入文件

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var COOKIE_NAME = ‘username‘; 
 if( $.cookie(COOKIE_NAME) ){ 
   $("#username").val( $.cookie(COOKIE_NAME) ); 
 } 
 $("#check").click(function(){ 
   if(this.checked){ 
     $.cookie(COOKIE_NAME, $("#username").val() , { path: ‘/‘, expires: 10 }); 
     //var date = new Date(); 
     //date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000)); //三天后的这个时候过期 
     //$.cookie(COOKIE_NAME, $("#username").val(), { path: ‘/‘, expires: date }); 
   }else{ 
     $.cookie(COOKIE_NAME, null, { path: ‘/‘ }); //删除cookie 
   } 
 });

 

函数。

 

　　　语法：$.cookie(名称,值,[option])

 

　　　(1)读取cookie值

 

　　　$.cookie(cookieName)　　　　　　　　　cookieName:要读取的cookie名称。

 

示例：$.cookie("username"); 读取保存在cookie中名为的username的值。

 

　　　(2)写入设置Cookie值：

 

　　　$.cookie(cookieName,cookieValue);　　cookieName:要设置的cookie名称，cookieValue表示相对应的值。

 

　　　示例:$.cookie("username","admin"); 将值"admin"写入cookie名为username的cookie中。

 

　　　　　 $.cookie("username",NULL);　　　销毁名称为username的cookie

 

　　　(3) [option]参数说明：

 

　　　　　expires:　　有限日期，可以是一个整数或一个日期(单位：天)。　　这个地方也要注意，如果不设置这个东西，浏览器关闭之后此cookie就失效了

 

　　　　　path:　　　 cookie值保存的路径，默认与创建页路径一致。

 

domin: cookie域名属性，默认与创建页域名一样。　　这个地方要相当注意，跨域的概念，如果要主域名二级域名有效则要设置　　".xxx.com"

 

secrue:　　 一个布尔值，表示传输cookie值时，是否需要一个安全协议。

 

　　　　　示例：

 

复制代码 代码如下:

 


$.cookie("like", $(":radio[checked]").val(), {
        　　path: "/", expiress: 7
        })

 

一个完整设置与读取cookie的页面代码：

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery学习2</title>
  <script src="jQuery.1.8.3.js" type="text/javascript"></script>
  <script src="jquery.cookie.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#username").val($.cookie("username"));
      if ($.cookie("like") == "刘德华") {
        $(":radio[value=‘刘德华‘]").attr("checked", ‘checked‘)
      }
      else {
        $(":radio[value=‘张学友‘]").attr("checked", ‘checked‘)
      }
      $(":button").click(function () {
        $.cookie("username", $("#username").val(), {
          path: "/", expires: 7
        })
        $.cookie("like", $(":radio[checked]").val(), {
          path: "/", expiress: 7
        })
      })
    })
  </script>
</head>
<body>
  <p><input type="text" id="username" value="" /></p>
  <p>
    <input type="radio" name="like" value="刘德华" />刘德华
    <input type="radio" name="like" value="张学友" />张学友
  </p>
  <p><input type="button" value="保存" /></p>
</body>
</html>

 

cookie本质上是一个txt文本，因此只能够存入字符串，对象通常要序列化之后才能存入cookie，而取的时候要反序列才又能得到对象。

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function () {
     if ($.cookie("o") == null) {
       var o = { name: "张三", age: 24 };
       var str = JSON.stringify(o);　　//对序列化成字符串然后存入cookie
       $.cookie("o", str, {
         expires:7  //设置时间，如果此处留空，则浏览器关闭此cookie就失效。
       });
       alert("cookie为空");
     }
     else {
       var str1 = $.cookie("o");
       var o1 = JSON.parse(str1);　　//字符反序列化成对象
       alert(o1.name);　　　　　　　　//输反序列化出来的对象的姓名值
     }
   })

 

一个轻量级的cookie插件，可以读取、写入、删除cookie。

 

jquery.cookie.js的配置

 

首先包含jQuery的库文件，在后面包含jquery.cookie.js的库文件

 

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

 


使用方法

 

新添加一个会话cookie：

 


$.cookie(‘the_cookie‘, ‘the_value‘);

 

注：当没有指明cookie有效时间时，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为“会话cookie（session cookie）”
 

 

创建一个cookie并设置有效时间为7天:

 


$.cookie(‘the_cookie‘, ‘the_value‘, { expires: 7 });

 

注：当指明了cookie有效时间时，所创建的cookie被称为“持久cookie（persistent cookie）”。

 


创建一个cookie并设置cookie的有效路径：

 

$.cookie(‘the_cookie‘, ‘the_value‘, { expires: 7, path: ‘/‘ });

 

注：在默认情况下，只有设置cookie的网页才能读取该cookie。如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。

 

cookie的路径用于设置能够读取cookie的顶级目录。将这个路径设置为网站的根目录，可以让所有网页都能互相读取cookie（一般不要这样设置，防止出现冲突）

 


读取cookie:

 

$.cookie(‘the_cookie‘);

 

// cookie存在 => ‘the_value‘ $.cookie(‘not_existing‘); // cookie不存在 => null

 


删除cookie，通过传递null作为cookie的值即可：

 

$.cookie(‘the_cookie‘, null);

 


相关参数的解释

 

expires: 365

 

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

 

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

 

path: ‘/‘

 

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

 

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

 

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

 

如果你想删除一个定义了有效路径的cookie，你需要在调用函数时包含这个路径:$.cookie(‘the_cookie‘, null, { path: ‘/‘ });。

 


domain: ‘example.com‘

 

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

 

secure: true

 

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

 

raw: true

 

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

 

要关闭这个功能设置raw: true即可。

 


$.cookie(‘the_cookie‘); // get cookie $.cookie(‘the_cookie‘, ‘the_value‘); // set cookie $.cookie(‘the_cookie‘, ‘the_value‘, { expires: 7 }); // set cookie with an expiration date seven days in the future $.cookie(‘the_cookie‘, ‘‘, { expires: -1 }); // delete cookie
$.cookie(‘the_cookie‘, null); // delete cookie

 


$.cookie(‘the_cookie‘,‘the_value‘, {expires: 7, path: ‘/‘, domain:‘80tvb.com‘, secure: true});//完整调用方式

 

//或者这样：$.cookie(‘the_cookie‘,‘the_value‘);

 

//删除Cookie： $.cookie(‘the_cookie‘,null);

 

 

 

jQuery操作cookie的插件,大概的使用方法如下

 

$.cookie(‘the_cookie‘); //读取Cookie值
$.cookie(‘the_cookie‘, ‘the_value‘); //设置cookie的值
$.cookie(‘the_cookie‘, ‘the_value‘, {expires: 7, path: ‘/‘, domain: ‘jquery.com‘, secure: true});//新建一个cookie 包括有效期 路径域名等
$.cookie(‘the_cookie‘, ‘the_value‘); //新建cookie
$.cookie(‘the_cookie‘, null); //删除一个cookie

 


jquery设置cookie过期时间与检查cookies是否可用

 

让cookies在x分钟后过期
var date = new date();
date.settime(date.gettime() + (x * 60 * 1000));
$.cookie(‘example‘, ‘foo‘, { expires: date });

 

$.cookie(‘example‘, ‘foo‘, { expires: 7});

 


检查cookies是否可用
$(document).ready(function() {var dt = new date();dt.setseconds(dt.getseconds() + 60);document.cookie = “cookietest=1; expires=” + dt.togmtstring();var cookiesenabled = document.cookie.indexof(“cookietest=”) != -1;if(!cookiesenabled){//cookies不能用……..}});

 

Cookie是网站设计者放置在客户端的小文本文件。Cookie能为用户提供很多的 使得，例如购物网站存储用户曾经浏览过的产品列表，或者门户网站记住用户喜欢选择浏览哪类新闻。 在用户允许的情况下，还可以存储用户的登录信息，使得用户在访问网站时不必每次都键入这些信息

Cookie下载地址：  http://plugins.jquery.com/project/cookie

使用方法：

1.引入jquery.cookie.js

[javascript] view plaincopyprint?
  1. <script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>  
  2. <script src="scripts/jquery.cookie.js" type="text/javascript"></script>  

2.将cookie写入文件

[javascript] view plaincopyprint?
  1.     var COOKIE_NAME = ‘username‘;  
  2.     if( $.cookie(COOKIE_NAME) ){  
  3.         $("#username").val(  $.cookie(COOKIE_NAME) );  
  4.     }  
  5.     $("#check").click(function(){  
  6.         if(this.checked){  
  7.             $.cookie(COOKIE_NAME, $("#username").val() , { path: ‘/‘, expires: 10 });  
  8.             //var date = new Date();  
  9.             //date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000)); //三天后的这个时候过期  
  10.             //$.cookie(COOKIE_NAME, $("#username").val(), { path: ‘/‘, expires: date });  
  11.         }else{  
  12.             $.cookie(COOKIE_NAME, null, { path: ‘/‘ });  //删除cookie  
  13.         }  
  14.     });  

参数设置：
expires: (Number | Date)      有效期，可以设置一个整数作为有效期（单位：天），也可以设置一个日期对象作为Cookie的过期日期。如果指定日期为负数，那么此cookie将被删 除；如果不设置或者设置为null，那么此cookie将被当作Session Cookie处理，并且在浏览器关闭后删除

path:  (String)          Cookie的路径属性，默认是创建该cookie的页面路径

domain: (String)     Cookie的域名属性，默认是创建该cookie的页面域名

secure: (Boolean)  如果设为true，那么此cookie的传输会要求一个安全协议，例如HTTPS

 

jquery.cookie中的操作

标签：

原文地址：http://www.cnblogs.com/koleyang/p/4661632.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！