js操作cookie(创建、读取、删除)方法总结

àì夳堔傛蜴生んèń 2024-04-18 19:10 50阅读 0赞

### 文章目录 ###

*   *  0、Js.cookie.js
     *   *  0.1 基本用法
         *   *  \#创建Cookie：
             *  \#读取Cookie:
             *  \#删除Cookie：
         *  0.2 JSON支持
     *  1、jQuery.cookie.js
     *   *  1.1 基本操作
         *   *  \#创建cookie：
             *  \#读取cookie：
             *  \#删除cookie：
         *  1.2 全局配置
         *   *  \#raw
             *  \#json
     *  2、参考

--------------------

js操作cookie，可以通过开源的插件实现，方便快捷，兼容性好，同样也可以自己写；  
此文主要介绍两个常用的插件：  
`Js.cookie.js` 和 `jQuery.cookie.js`

## 0、Js.cookie.js ##

> js.cookie.js : 一个简单，轻量级的JavaScript API，用于处理cookie;

下载地址：[https://github.com/js-cookie/js-cookie/releases][https_github.com_js-cookie_js-cookie_releases]

优点：

*  适用于所有浏览器；
 *  接受任何字符；
 *  没有依赖；
 *  支持ES模块；
 *  Unobtrusive JSON support；
 *  Enable custom encoding/decoding；

### 0.1 基本用法 ###

#### \#创建Cookie： ####

创建一个cookie，整个站点可用；

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

创建一个cookie，有效期为4天，整个站点可用；

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

**注意：**  
expires的单位默认为“天”，那如何设置有效期小于1天呢？  
解决方案如下：

//设置cookie有效期为15分钟；
    var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
    Cookies.set('foo', 'bar', { 
        expires: inFifteenMinutes
    });

创建一个cookie，有效期为4天，且只在当前页面所在的路径有效；

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

举例解释一下，  
在 http://127.0.0.1/path1/test.html 页面中设置cookie，且cookie的path设为"",那么在 http://127.0.0.1/test.html 这个页面中是获取不到那个cookie的，而在 http://127.0.0.1/path1/path2/test.html 这个页面中是可以获取到那个cookie的；

下面的两种写法，效果是一样的，整个站点可用；

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

#### \#读取Cookie: ####

读取某个cookie：

Cookies.get('name') // => 'value'
    Cookies.get('nothing') // => undefined

读取所有可见cookie：返回的是个json对象；

Cookies.get() // => { name: 'value' , name1: 'value1' }

#### \#删除Cookie： ####

删除某个cookie：

Cookies.remove('name')

删除当前页面所在路径下某个有效的cookie：

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

注意：在路径path1下的页面中设置了个cookie，路径设为path1/path2

Cookies.set('name', 'value', {  path: 'path1/path2' });

但在路径path1/path2中的页面中是无法删除这个cookie的，只能到路径path1下的页面中去删除：

Cookies.remove('name',  {  path: 'path1/path2' });

### 0.2 JSON支持 ###

当穿件cookie时，可以将Array或Object作为值；

Cookies.set('name', {  foo: 'bar' });

读取cookie值：

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

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

## 1、jQuery.cookie.js ##

> Jquery.cookie.js - A simple, lightweight jQuery plugin for reading, writing and deleting cookies；  
> Jquery.cookie.js - 一个简单，轻量的jquery插件，用于cookie的读取、写入和删除操作；

下载地址：[http://plugins.jquery.com/cookie/][http_plugins.jquery.com_cookie]  
Github地址：[https://github.com/carhartl/jquery-cookie][https_github.com_carhartl_jquery-cookie]

注意：使用之前要引入jquery.js;

### 1.1 基本操作 ###

#### \#创建cookie： ####

\#创建一个cookie，当前页面路径有效；

$.cookie('cookieName', 'cookieValue');

此处有`坑`，举例解释一下，  
在 http://127.0.0.1/path1/test.html 页面中这样设置cookie，$.cookie(‘cookieName’, ‘cookieValue’),那么在 http://127.0.0.1/test.html 这个页面中是获取不到那个cookie的，而在 http://127.0.0.1/path1/path2/test.html 这个页面中是可以获取到那个cookie的；

\#创建一个cookie，全站点有效；

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

\#创建一个cookie，有效期为4天；

$.cookie('cookieName', 'cookieValue', {  expires: 4 });

**注意：**  
expires的单位默认为“天”，那如何设置有效期小于1天呢？  
解决方案如下：

//设置cookie有效期为15分钟；
    var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
    $.cookie('cookieName', 'cookieValue', {  expires: inFifteenMinutes  });

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

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

该cookie只在website1站点下有效；

#### \#读取cookie： ####

\#读取某个cookie：

$.cookie('name'); // => "value"
    $.cookie('nothing'); // => undefined

\#读取所有有效的cookie：（json格式）

$.cookie(); // => { "name": "value","name1":"value1" }

#### \#删除cookie： ####

// 成功删除返回true，失败返回false；
    $.removeCookie('name'); // => true
    $.removeCookie('nothing'); // => false
    
    // 删除时，必须使用创建时设置的属性值（path，domain 等）
    $.cookie('name', 'value', {  path: '/' });
    // 失败
    $.removeCookie('name'); // => false
    // 成功
    $.removeCookie('name', {  path: '/' }); // => true

### 1.2 全局配置 ###

#### \#raw ####

cookie是否编码；（using encodeURIComponent/decodeURIComponent）

$.cookie.raw = true;

#### \#json ####

是否以json格式进行存储和读取；（Assumes JSON.stringify and JSON.parse）

$.cookie.json = true;

## 2、参考 ##

[https://github.com/js-cookie/js-cookie][https_github.com_js-cookie_js-cookie]  
[https://github.com/js-cookie/js-cookie/wiki/Frequently-Asked-Questions\#why-are-my-cookies-being-deleted][https_github.com_js-cookie_js-cookie_wiki_Frequently-Asked-Questions_why-are-my-cookies-being-deleted]

--------------------

▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼  
博客园同步更新地址：[https://www.cnblogs.com/willingtolove/p/11537597.html][https_www.cnblogs.com_willingtolove_p_11537597.html]  
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲

[https_github.com_js-cookie_js-cookie_releases]: https://github.com/js-cookie/js-cookie/releases
[http_plugins.jquery.com_cookie]: http://plugins.jquery.com/cookie/
[https_github.com_carhartl_jquery-cookie]: https://github.com/carhartl/jquery-cookie
[https_github.com_js-cookie_js-cookie]: https://github.com/js-cookie/js-cookie
[https_github.com_js-cookie_js-cookie_wiki_Frequently-Asked-Questions_why-are-my-cookies-being-deleted]: https://github.com/js-cookie/js-cookie/wiki/Frequently-Asked-Questions#why-are-my-cookies-being-deleted
[https_www.cnblogs.com_willingtolove_p_11537597.html]: https://www.cnblogs.com/willingtolove/p/11537597.html