原生js和jquery两种处理cookie的插件介绍

jquery.cookie插件库和js.cookie的作者都是Klaus Hartl （github地址：https://github.com/carhartl）。这两个都可以读、写和删除cookie。

两个库的下载地址

链接：http://pan.baidu.com/s/1i5M4ne1 密码：9pum

js.cookie 库介绍

一个简单的、轻量级的javascript api来处理cookie

1、演示图

2、浏览器兼容性情况

3、下载

直接点击这里下载

最新版请访问官方github

或者通过 npm 、Bower 下载，名字为 js-cookie。

4、使用

• 创建一个整站cookie

Cookies.set('name', 'value');

• 创建一个整站cookie ，cookie 的有效期为 7 天

Cookies.set('name', 'value', { expires: 7 });

• 创建一个仅对 path 路径页面有效的 cookie ，cookie 的有效期为 7 天

Cookies.set('name', 'value', { expires: 7, path: '' });

• 读取 cookie

Cookies.get('name'); // 如果cookie存在 则获取到cookie值 => 'value'
Cookies.get('nothing'); // 如果cookie不存在 则返回 => undefined

• 获取所有可见的 cookie

Cookies.get(); // 数据格式 => { name: 'value' }

• 删除 cookie

Cookies.remove('name');

• 删除 path 路径下的 cookie

Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!

5、命名空间冲突问题

如果 Cookies 存在命名空间冲突问题，noConflict 函数可以解决这个问题

var Cookies2 = Cookies.noConflict();
Cookies2.set('name', 'value');

6、JSON

Cookies.set('name', { foo: 'bar' });
Cookies.get('name'); // => '{"foo":"bar"}'
Cookies.get(); // => { name: '{"foo":"bar"}' }

Cookies.getJSON 的使用

Cookies.getJSON('name'); // => { foo: 'bar' }
Cookies.getJSON(); // => { name: { foo: 'bar' } }

7、属性

domain

创建cookie所在网页所拥有的域名

Cookies.set('name', 'value', { domain: 'weber.pub' });
Cookies.get('name'); // => undefined (需要读取 'weber.pub' 这个域名下的 cookie)

secure

默认是false，如果为true，cookie的传输协议需为https；

Cookies.set('name', 'value', { secure: true });
Cookies.get('name'); // => 'value'
Cookies.remove('name', { secure: true });

jquery.cookie 介绍

一个简单的、轻量级的jQuery插件来处理cookie的读写和删除。

1、依赖jQuery库

2、浏览器兼容性情况

3、下载

官方github：https://github.com/carhartl/jquery-cookie

4、使用

• 创建一个整站cookie

$.cookie('name', 'value');

• 创建一个整站cookie ，cookie 的有效期为 7 天

$.cookie('name', 'value', { expires: 7 });

• 创建一个仅对 path 路径页面有效的 cookie ，cookie 的有效期为 7 天

$.cookie('name', 'value', { expires: 7, path: '/' });

• 读取 cookie

$.cookie('name'); // 如果cookie存在 则获取到cookie值 => 'value'
$.cookie('nothing'); // 如果cookie不存在 则返回 => undefined

• 获取所有可见的 cookie

$.cookie(); // 数据格式 => { name: 'value' }

• 删除 cookie

$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false

• 删除带属性的cookie

$.cookie('name', 'value', { path: '/' });
// 错误
$.removeCookie('name'); // => false
// 正确
$.removeCookie('name', { path: '/' }); // => true

5、属性

domain

创建cookie所在网页所拥有的域名

$.cookie('name', 'value', { domain: 'weber.pub' });

secure

默认是false，如果为true，cookie的传输协议需为https；

$.cookie('name', 'value', { secure: true });
$.cookie('name'); // => 'value'
$.removeCookie('name', { secure: true }); 

raw

默认为false，读取和写入时候自动进行编码和解码（使用encodeURIComponent编码，使用decodeURIComponent解码），关闭这个功能，请设置为true。

$.cookie.raw = true;

json

$.cookie.json = true;