jquery.cookie.js 使用方法

Cookies

简介：

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

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

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

一、定义：让网站服务器把少量数据储存到客户端的硬盘或内存，从客户端的硬盘读取数据的一种技术；

1 <script type="text/javascript" src="js/jquery.min.js"></script>
2 <script type="text/javascript" src="js/jquery.cookie.js"></script>
 
 

 

二、使用：

1、引入jQuery与jQuery.Cookie.js插件（配置）。

1 <script src="jQuery.1.8.3.js" type="text/javascript"></script> 
2 <script src="jquery.cookie.js" type="text/javascript"></script>
3 //由于cookie是基于jquery的，所以需要先引入jquery插件，这里引入的是jquery1.8.3版本的（其他任意版本jq都可以的）

2.具体语法（常见）：

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

（1）.添加一个"会话cookie"

1 $.cookie('the_cookie', 'the_value');

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

（2）.创建一个cookie并设置有效时间为 7天

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

这里指明了cookie有效时间，所创建的cookie被称为“持久 cookie （persistent cookie）”。注意单位是：天；

（3）.创建一个cookie并设置 cookie的有效路径

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

在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。

（4）.读取cookie

1 $.cookie('the_cookie');

（5）.删除cookie

1 $.cookie('the_cookie', null);   //通过传递null作为cookie的值即可

（6）.可选参数

1 $.cookie('the_cookie','the_value',{
2     expires:7,   
3     path:'/',
4     domain:'jquery.com',
5     secure:true
6 })　

 expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；这个地方也要注意，如果不设置这个东西，浏览器关闭之后此cookie就失效了

path：（String）创建该Cookie的页面路径；cookie值保存的路径，默认与创建页路径一致。
domain：（String）创建该Cookie的页面域名；默认与创建页域名一样。　　这个地方要相当注意，跨域的概念，如果要主域名二级域名有效则要设置　　".xxx.com"
secure：一个布尔值，表示传输cookie值时，是否需要一个安全协议。（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；

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

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

 

三、不多说了，来一个实例：

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

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

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

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

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

 

四、小结和引深：

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

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

 

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

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

 

 1 //检查当前浏览器不支持或Cookie已被禁用呢？可以使用以下js代码：
 2 var dt = new Date();   
 3 dt.setSeconds(dt.getSeconds() + 60);   
 4 document.cookie = "cookietest=1; expires=" + dt.toGMTString();   
 5 var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;   
 6 if(!cookiesEnabled) {   
 7     //没有启用cookie   
 8     alert("没有启用cookie ");  
 9 } else{  
10     //已经启用cookie   
11     alert("已经启用cookie ");  
12 }  

 

posted @ 2017-08-05 16:48  改变自己now  阅读(1076)  评论(0)    收藏  举报