詳解操作cookie的原生方法cookieStore
1. 平時(shí)如何操作 cookie
document.cookie 能獲取到當(dāng)前域所有的 cookie 字符串。每個(gè) cookie 用分號進(jìn)行隔開:
document.cookie; // "a=1; b=2; c=wenzi"
操作 cookie,均是在操作 document.cookie。如下面就是我常用的一段代碼:
/** * 寫cookies * @param {string} name 寫cookie的key * @param {string|number} value 寫cookie的值 * @param {number} day 存儲的時(shí)間,默認(rèn)30天 */ export const setCookie = (name: string, value: string | number, day = 30): void => { const exp = new Date(); exp.setTime(exp.getTime() + day * 24 * 60 * 60 * 1000); document.cookie = `${name}=${escape(value.toString())};path=/;expires=${exp.toUTCString()}`; }; /** * 讀取cookies * @param {string} name 要獲取的cookie名稱 * @param {number|boolean} type 是否直接獲取對應(yīng)的值,若存入真值,則直接返回,否則進(jìn)行解碼 */ export const getCookie = (name: string): string | null => { const reg = new RegExp(`(^| )${name}=([^;]*)(;|$)`); const arr = document.cookie.match(reg); if (arr) { return unescape(arr[2]); } return null; }; /** * 刪除cookie * @param name 刪除的cookie名稱 */ export const delCookie = (name: string) => { if (!name) return; const ex: Date = new Date(); ex.setTime(ex.getTime() - 1); document.cookie = `${name}=; expires=${ex.toUTCString()};path=/`; };
可以看到設(shè)置、獲取和刪除 cookie,都是在 document.cookie 上進(jìn)行操作的。
2. 新方式 cookieStore
現(xiàn)在 Chrome 有了更方便操作 cookie 的方法了cookieStore,這個(gè)方法是在 Chrome87 版本加入的,兼容性還不太好。
下圖是當(dāng)前日期 2021/03/15 的兼容性概覽,可以發(fā)現(xiàn)僅僅是 Chrome 體系支持了 cookieStore。
不過我們可以先來了解它的用法。
cookieStore 現(xiàn)在只能在https 協(xié)議下的域名才能訪問的到;其他 http 協(xié)議的域名里會提示 cookieStore 為 undefined,或者設(shè)置失敗。
2.1 基本方法
cookieStore 是一個(gè)類似localStorage的 object 類型變量。
可以看到 cookieStore 主要有 5 個(gè)方法:
- set: 設(shè)置 cookie,可以是 set(name, value),也可以是 set({name, value});
- get: 獲取 cookie,可以是 get(name),或者 get({name});
- getAll: 獲取所有的 cookie;
- delete: 刪除 cookie;
- onchange: 監(jiān)聽 cookie 的變化;
前 4 個(gè)方法天然支持 Promise。接下來我們一個(gè)個(gè)來了解下。
2.2 設(shè)置 cookie
cookieStore.set 方法可以設(shè)置 cookie,并返回一個(gè) Promise 狀態(tài),表示是否設(shè)置成功。
cookieStore .set('username', 'wenzi') .then(() => console.log('設(shè)置username成功')) .catch(() => console.error('設(shè)置username失敗'));
如果我們想要設(shè)置更多的屬性,例如過期時(shí)間,可以傳入一個(gè) Object 類型:
cookieStore .set({ name: 'age', value: 18, expires: new Date().getTime() + 24 * 60 * 60 * 1000, }) .then(() => console.log('設(shè)置age成功')) .catch(() => console.error('設(shè)置age失敗'));
value 中所有的數(shù)據(jù)都會默認(rèn)先執(zhí)行toString(),然后再進(jìn)行存儲,因此有些非基本類型的數(shù)據(jù),最好先轉(zhuǎn)換好。
上面都是我們設(shè)置 cookie 成功的情況,那么什么時(shí)候會設(shè)置失敗呢?在本地 localhost 環(huán)境會設(shè)置失敗。
本地 localhost,我們是能獲取到cookieStore這個(gè)全局變量,也能執(zhí)行相應(yīng)的方法,但無法設(shè)置成功:
cookieStore.set('username', 'wenzi');
瀏覽器會發(fā)出提示,無法在不安全的域名下通過 CookieStore 中的 set 設(shè)置 cookie:
Uncaught (in promise) TypeError: Failed to execute 'set' on 'CookieStore': Cannot modify a secure cookie on insecure origin
添加 catch 后,就能捕獲到這個(gè)錯(cuò)誤:
cookieStore .set('username', 'wenzi') .then(() => console.log('設(shè)置username成功')) .catch(() => console.error('設(shè)置username失敗'));
因此在想使用 cookieStore 時(shí),不能直接通過下面的方式判斷,還得新增一個(gè)頁面 url 的協(xié)議來判斷:
typeof cookieStore === 'object'; // 判斷不準(zhǔn)確,本地localhost也會存在
應(yīng)當(dāng)使用:
const isSupportCookieStore = typeof cookieStore === 'object' && location.protocol === 'https:'; // 只有在https協(xié)議下才使用cookieStore
2.3 獲取 cookie
cookieStore.get(name)方法可以獲取 name 對應(yīng)的 cookie,會以 Promise 格式返回所有的屬性:
await cookieStore.get('username');
get()方法還可以接收一個(gè) Object 類型,測試后發(fā)現(xiàn),key 的值只能是 name:
await cookieStore.get({ name: 'username' });
當(dāng)獲取的 cookie 不存在時(shí),則返回一個(gè) Promise<null>。
2.4 獲取所有的 cookie
cookieStore.getAll()方法可以獲取當(dāng)前所有的 cookie,以 Promise<[]>的形式返回的形式返回,數(shù)組中的每一項(xiàng)與通過 get()方式獲取到的格式一樣;若當(dāng)前域沒有 cookie,或者獲取不到指定的 cookie,則為空數(shù)組;
await cookieStore.getAll();
getAll()方法也可以傳入一個(gè) name,用來獲取對應(yīng)的 cookie:
await cookieStore.getAll('username'); await cookieStore.getAll({ name: 'username' });
2.5 刪除 cookie
cookieStore.delete(name)用來刪除指定的 cookie:
cookieStore .delete('age') .then(() => console.log('刪除age成功')) .catch(() => console.error('刪除age失敗'));
刪除成功后則會提示刪除成功。
即使刪除一個(gè)不存在的 cookie,也會提示刪除成功。因此,當(dāng)再次執(zhí)行上面的代碼時(shí),還是會正常提示。
同樣的,在 localhost 環(huán)境下會提示刪除失敗。
2.6 監(jiān)聽 cookie 的變化
我們可以通過添加change事件,來監(jiān)聽 cookie 的變化,無論是通過 cookieStore 操作,還是直接操作 document.cookie,都能監(jiān)聽。
添加監(jiān)聽事件:
cookieStore.addEventListener('change', (event) => { const type = event.changed.length ? 'change' : 'delete'; const data = (event.changed.length ? event.changed : event.deleted).map((item) => item.name); console.log(`剛才進(jìn)行了 ${type} 操作,cookie有:${JSON.stringify(data)}`); });
這里面有 2 個(gè)重要的字段changed數(shù)組和deleted數(shù)組,當(dāng)設(shè)置 cookie 時(shí),則 changed 數(shù)組里為剛才設(shè)置的 cookie;當(dāng)刪除 cookie 時(shí),則 deleted 數(shù)組里為剛才刪除的 cookie。
2.6.1 設(shè)置操作
當(dāng)調(diào)用 set()方法時(shí),會觸發(fā) change 事件,同時(shí)影響的 cookie 會放在event.changed數(shù)組中。
通過 document.cookie 設(shè)置或者刪除的 cookie,均認(rèn)為是在修改 cookie,而不是刪除。
每次設(shè)置 cookie 時(shí),即使兩次的 name 和 value 完全一樣,也會觸發(fā)change事件。
cookieStore.set('math', 90);
2.6.2 刪除操作
通過 delete()方法刪除一個(gè)存在的 cookie 時(shí),會觸發(fā) change 事件,被刪除的 cookie 會放在event.deleted數(shù)組中。
如果刪除一個(gè)不存在的 cookie,則不會觸發(fā) change 事件。
cookieStore.delete('math');
可以看到,當(dāng)?shù)诙蝿h除 name 為 math 的 cookie 時(shí),就沒有觸發(fā) change 事件。
3. 總結(jié)
我們整篇了解了下cookieStore的使用和操作,要比我們直接操作 cookie 簡便的多,而且還可以通過自身的 change 事件來監(jiān)聽 cookie 的變化。
以上就是詳解操作cookie的原生方法cookieStore的詳細(xì)內(nèi)容,更多關(guān)于cookie的原生方法cookieStore的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能
這篇文章主要介紹了在IE8上JS實(shí)現(xiàn)combobox支持拼音檢索功能的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05在Javascript操作JSON對象,增加 刪除 修改的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄贘avascript操作JSON對象,增加 刪除 修改的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06JavaScript中 創(chuàng)建動態(tài) QML 對象的方法
這篇文章主要介紹了 JavaScript中 創(chuàng)建動態(tài) QML 對象,下面文章主要分析了兩中方法,分別是從 QML 字符串創(chuàng)建對象和動態(tài)創(chuàng)建組件以及刪除對象等方法,具有有一定的參考價(jià)值,需要的小伙伴可以參考一下2021-12-12javascript監(jiān)聽頁面刷新和頁面關(guān)閉事件方法詳解
本文主要介紹了javascript監(jiān)聽頁面刷新和頁面關(guān)閉事件的方法,具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01關(guān)于js拖拽上傳 [一個(gè)拖拽上傳修改頭像的流程]
拖拽是操作系統(tǒng)用戶體驗(yàn)最偉大的改進(jìn)之一。它讓人隨心所欲的操作,更符合人們的直觀感受。2011-07-07JavaScript/TypeScript中==和===的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于JavaScript/TypeScript中==和===區(qū)別的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03JavaScript保留兩位小數(shù)的2個(gè)自定義函數(shù)
這篇文章主要介紹了JavaScript保留兩位小數(shù)的2個(gè)自定義函數(shù),需要的朋友可以參考下2014-05-05