本文例項講述了js實現操作cookie的常見方法。分享給大家供大家參考，具體如下：

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

優點：

• 適用於所有瀏覽器；
• 接受任何字元；
• 沒有依賴；
• 支援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',{ 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',{ expires: 4 });
Cookies.set('name',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',{ path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name',{ path: '' }) // removed!

注意：在路徑path1下的頁面中設定了個cookie，路徑設為path1/path2

Cookies.set('name',{ 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/
Github地址：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',{ path: '/' });

建立一個cookie，有效期為4天；

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

注意：
expires的單位預設為“天”，那如何設定有效期小於1天呢？
解決方案如下：

//設定cookie有效期為15分鐘；
var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
$.cookie('cookieName',{ expires: inFifteenMinutes });

建立一個cookie，並設定cookie的有效路徑：

$.cookie('name',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',{ 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/wiki/Frequently-Asked-Questions#why-are-my-cookies-being-deleted

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》、《JavaScript查詢演算法技巧總結》、《JavaScript動畫特效與技巧彙總》、《JavaScript錯誤與除錯技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。