js實(shí)現(xiàn)操作cookie的常見方法總結(jié)【創(chuàng)建、讀取、刪除】
本文實(shí)例講述了js實(shí)現(xiàn)操作cookie的常見方法。分享給大家供大家參考,具體如下:
js操作cookie,可以通過開源的插件實(shí)現(xiàn),方便快捷,兼容性好,同樣也可以自己寫;
此文主要介紹兩個(gè)常用的插件:
Js.cookie.js
和 jQuery.cookie.js
0、Js.cookie.js
js.cookie.js : 一個(gè)簡單,輕量級(jí)的JavaScript API,用于處理cookie;
下載地址:https://github.com/js-cookie/js-cookie/releases
優(yōu)點(diǎn):
- 適用于所有瀏覽器;
- 接受任何字符;
- 沒有依賴;
- 支持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)前頁面所在的路徑有效;
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 這個(gè)頁面中是獲取不到那個(gè)cookie的,而在 http://127.0.0.1/path1/path2/test.html 這個(gè)頁面中是可以獲取到那個(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)前頁面所在路徑下某個(gè)有效的cookie:
Cookies.set('name', 'value', { path: '' }) Cookies.remove('name') // fail! Cookies.remove('name', { path: '' }) // removed!
注意:在路徑path1下的頁面中設(shè)置了個(gè)cookie,路徑設(shè)為path1/path2
Cookies.set('name', 'value', { path: 'path1/path2' });
但在路徑path1/path2中的頁面中是無法刪除這個(gè)cookie的,只能到路徑path1下的頁面中去刪除:
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è)簡單,輕量的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)前頁面路徑有效;
$.cookie('cookieName', 'cookieValue');
此處有坑
,舉例解釋一下,
在 http://127.0.0.1/path1/test.html頁面中這樣設(shè)置cookie,$.cookie('cookieName', 'cookieValue'),那么在 http://127.0.0.1/test.html 這個(gè)頁面中是獲取不到那個(gè)cookie的,而在 http://127.0.0.1/path1/path2/test.html 這個(gè)頁面中是可以獲取到那個(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: '/' }); // => true
1.2 全局配置
#raw
cookie是否編碼;(using encodeURIComponent/decodeURIComponent)
$.cookie.raw = true;
#json
是否以json格式進(jìn)行存儲(chǔ)和讀?。唬ˋssumes 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動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
IE8提示Invalid procedure call or argument 異常的解決方法
某臺(tái)機(jī)器上,訪問公司的好幾個(gè)產(chǎn)品網(wǎng)站,都拋出很多 Invalid procedure call or argument ,跟進(jìn)了下,情況最后簡化為2012-09-09原生Js Canvas去除視頻綠幕背景的方法實(shí)現(xiàn)
本文主要介紹了原生Js Canvas去除視頻綠幕背景的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09javascript模擬地球旋轉(zhuǎn)效果代碼實(shí)例
javascript模擬地球旋轉(zhuǎn)效果,把一下代碼保存到HTML文件,打開就可以看到一個(gè)旋轉(zhuǎn)的地球。請(qǐng)使用Chrome、Opera或者火狐瀏覽器查看,IE8不支持2013-12-12OpenLayers3實(shí)現(xiàn)地圖顯示功能
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)地圖顯示功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09JavaScript實(shí)現(xiàn)數(shù)組全排列、去重及求最大值算法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組全排列、去重及求最大值算法,結(jié)合實(shí)例形式分析了JavaScript針對(duì)數(shù)組的遞歸、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07JS圖片定時(shí)翻滾效果實(shí)現(xiàn)方法
這篇文章主要介紹了JS圖片定時(shí)翻滾效果實(shí)現(xiàn)方法,涉及javascript結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)頁面元素動(dòng)態(tài)切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06JS使用cookie實(shí)現(xiàn)只出現(xiàn)一次的廣告代碼效果
我們上網(wǎng)經(jīng)常會(huì)遇到第一次需要登錄而之后不用再登錄的網(wǎng)站的情況,其實(shí)是運(yùn)用了Cookie 存儲(chǔ) web 頁面的用戶信息,Cookie 以名/值對(duì)形式存儲(chǔ),當(dāng)瀏覽器從服務(wù)器上請(qǐng)求 web 頁面時(shí), 屬于該頁面的 cookie 會(huì)被添加到該請(qǐng)求中2017-04-04