js實現(xiàn)操作cookie的常見方法總結(jié)【創(chuàng)建、讀取、刪除】
本文實例講述了js實現(xiàn)操作cookie的常見方法。分享給大家供大家參考,具體如下:
js操作cookie,可以通過開源的插件實現(xiàn),方便快捷,兼容性好,同樣也可以自己寫;
此文主要介紹兩個常用的插件:
Js.cookie.js
和 jQuery.cookie.js
0、Js.cookie.js
js.cookie.js : 一個簡單,輕量級的JavaScript API,用于處理cookie;
下載地址:https://github.com/js-cookie/js-cookie/releases
優(yōu)點:
- 適用于所有瀏覽器;
- 接受任何字符;
- 沒有依賴;
- 支持ES模塊;
- Unobtrusive JSON support;
- Enable custom encoding/decoding;
0.1 基本用法
#創(chuàng)建Cookie:
創(chuàng)建一個cookie,整個站點可用;
Cookies.set('name', 'value');
創(chuàng)建一個cookie,有效期為4天,整個站點可用;
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)建一個cookie,有效期為4天,且只在當(dāng)前頁面所在的路徑有效;
Cookies.set('name', 'value', { expires: 4, path: '' })
舉例解釋一下,
在 http://127.0.0.1/path1/test.html頁面中設(shè)置cookie,且cookie的path設(shè)為"",那么在 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')
刪除當(dāng)前頁面所在路徑下某個有效的cookie:
Cookies.set('name', 'value', { path: '' }) Cookies.remove('name') // fail! Cookies.remove('name', { path: '' }) // removed!
注意:在路徑path1下的頁面中設(shè)置了個cookie,路徑設(shè)為path1/path2
Cookies.set('name', 'value', { path: 'path1/path2' });
但在路徑path1/path2中的頁面中是無法刪除這個cookie的,只能到路徑path1下的頁面中去刪除:
Cookies.remove('name', { path: 'path1/path2' });
0.2 JSON支持
當(dāng)穿件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 基本操作
#創(chuàng)建cookie:
創(chuàng)建一個cookie,當(dāng)前頁面路徑有效;
$.cookie('cookieName', 'cookieValue');
此處有坑
,舉例解釋一下,
在 http://127.0.0.1/path1/test.html頁面中這樣設(shè)置cookie,$.cookie('cookieName', 'cookieValue'),那么在 http://127.0.0.1/test.html 這個頁面中是獲取不到那個cookie的,而在 http://127.0.0.1/path1/path2/test.html 這個頁面中是可以獲取到那個cookie的;
創(chuàng)建一個cookie,全站點有效;
$.cookie('name', 'value', { path: '/' });
創(chuàng)建一個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)建一個cookie,并設(shè)置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 // 刪除時,必須使用創(chuàng)建時設(shè)置的屬性值(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/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動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
IE8提示Invalid procedure call or argument 異常的解決方法
某臺機器上,訪問公司的好幾個產(chǎn)品網(wǎng)站,都拋出很多 Invalid procedure call or argument ,跟進了下,情況最后簡化為2012-09-09原生Js Canvas去除視頻綠幕背景的方法實現(xiàn)
本文主要介紹了原生Js Canvas去除視頻綠幕背景的方法實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09JavaScript實現(xiàn)數(shù)組全排列、去重及求最大值算法示例
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)組全排列、去重及求最大值算法,結(jié)合實例形式分析了JavaScript針對數(shù)組的遞歸、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07JS使用cookie實現(xiàn)只出現(xiàn)一次的廣告代碼效果
我們上網(wǎng)經(jīng)常會遇到第一次需要登錄而之后不用再登錄的網(wǎng)站的情況,其實是運用了Cookie 存儲 web 頁面的用戶信息,Cookie 以名/值對形式存儲,當(dāng)瀏覽器從服務(wù)器上請求 web 頁面時, 屬于該頁面的 cookie 會被添加到該請求中2017-04-04