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

js操作cookie，可以通過(guò)開源的插件實(shí)現(xiàn)，方便快捷，兼容性好，同樣也可以自己寫；此文主要介紹兩個(gè)常用的插件：Js.cookie.js 和 jQuery.cookie.js

0、Js.cookie.js

js.cookie.js : 一個(gè)簡(jiǎn)單，輕量級(jí)的JavaScript API，用于處理cookie;

下載地址：https://github.com/js-cookie/js-cookie/releases

優(yōu)點(diǎn)：

適用于所有瀏覽器； 接受任何字符； 沒(méi)有依賴； 支持ES模塊； Unobtrusive JSON support； Enable custom encoding/decoding；0.1 基本用法#創(chuàng)建Cookie：

創(chuàng)建一個(gè)cookie，整個(gè)站點(diǎn)可用；

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

創(chuàng)建一個(gè)cookie，有效期為4天，整個(gè)站點(diǎn)可用；

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

注意：expires的單位默認(rèn)為“天”，那如何設(shè)置有效期小于1天呢？解決方案如下：

//設(shè)置cookie有效期為15分鐘；var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);Cookies.set(’foo’, ’bar’, { expires: inFifteenMinutes});

創(chuàng)建一個(gè)cookie，有效期為4天，且只在當(dāng)前頁(yè)面所在的路徑有效；

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

舉例解釋一下，在 http://127.0.0.1/path1/test.html頁(yè)面中設(shè)置cookie，且cookie的path設(shè)為'',那么在 http://127.0.0.1/test.html 這個(gè)頁(yè)面中是獲取不到那個(gè)cookie的，而在 http://127.0.0.1/path1/path2/test.html 這個(gè)頁(yè)面中是可以獲取到那個(gè)cookie的；

下面的兩種寫法，效果是一樣的，整個(gè)站點(diǎn)可用；

Cookies.set(’name’, ’value’, { expires: 4 });Cookies.set(’name’, ’value’, { expires: 4, path: ’/’ });#讀取Cookie:

讀取某個(gè)cookie：

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

讀取所有可見cookie：返回的是個(gè)json對(duì)象；

Cookies.get() // => { name: ’value’ , name1: ’value1’ }#刪除Cookie：

刪除某個(gè)cookie：

Cookies.remove(’name’)

刪除當(dāng)前頁(yè)面所在路徑下某個(gè)有效的cookie：

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

注意：在路徑path1下的頁(yè)面中設(shè)置了個(gè)cookie，路徑設(shè)為path1/path2

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

但在路徑path1/path2中的頁(yè)面中是無(wú)法刪除這個(gè)cookie的，只能到路徑path1下的頁(yè)面中去刪除：

Cookies.remove(’name’, { path: ’path1/path2’ });0.2 JSON支持

當(dāng)穿件cookie時(shí)，可以將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 - 一個(gè)簡(jiǎn)單，輕量的jquery插件，用于cookie的讀取、寫入和刪除操作；

下載地址：http://plugins.jquery.com/cookie/Github地址：https://github.com/carhartl/jquery-cookie

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

1.1 基本操作#創(chuàng)建cookie：

創(chuàng)建一個(gè)cookie，當(dāng)前頁(yè)面路徑有效；

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

此處有坑，舉例解釋一下，在 http://127.0.0.1/path1/test.html頁(yè)面中這樣設(shè)置cookie，$.cookie(’cookieName’, ’cookieValue’),那么在 http://127.0.0.1/test.html 這個(gè)頁(yè)面中是獲取不到那個(gè)cookie的，而在 http://127.0.0.1/path1/path2/test.html 這個(gè)頁(yè)面中是可以獲取到那個(gè)cookie的；

創(chuàng)建一個(gè)cookie，全站點(diǎn)有效；

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

創(chuàng)建一個(gè)cookie，有效期為4天；

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

注意：expires的單位默認(rèn)為“天”，那如何設(shè)置有效期小于1天呢？解決方案如下：

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

創(chuàng)建一個(gè)cookie，并設(shè)置cookie的有效路徑：

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

該cookie只在website1站點(diǎn)下有效；

#讀取cookie：

讀取某個(gè)cookie：

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

讀取所有有效的cookie：（json格式）

$.cookie(); // => { 'name': 'value','name1':'value1' }#刪除cookie：

// 成功刪除返回true，失敗返回false；$.removeCookie(’name’); // => true$.removeCookie(’nothing’); // => false// 刪除時(shí)，必須使用創(chuàng)建時(shí)設(shè)置的屬性值（path，domain 等）$.cookie(’name’, ’value’, { path: ’/’ });// 失敗$.removeCookie(’name’); // => false// 成功$.removeCookie(’name’, { path: ’/’ }); // => true1.2 全局配置#raw

cookie是否編碼；（using encodeURIComponent/decodeURIComponent）

$.cookie.raw = true;#json

是否以json格式進(jìn)行存儲(chǔ)和讀取；（Assumes JSON.stringify and JSON.parse）

$.cookie.json = true;2、參考

https://github.com/js-cookie/js-cookiehttps://github.com/js-cookie/js-cookie/wiki/Frequently-Asked-Questions#why-are-my-cookies-being-deleted

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。