欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解操作cookie的原生方法cookieStore

 更新時(shí)間：2021年05月14日 10:58:45   作者：蚊子博客  
我們平時(shí)對(duì) cookie 的增刪改查等操作，都是在操作document.cookie，這里我們介紹一個(gè)新方法cookieStore。

1. 平時(shí)如何操作 cookie

document.cookie 能獲取到當(dāng)前域所有的 cookie 字符串。每個(gè) cookie 用分號(hào)進(jìn)行隔開(kāi)：

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 存儲(chǔ)的時(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 是否直接獲取對(duì)應(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。

不過(guò)我們可以先來(lái)了解它的用法。

cookieStore 現(xiàn)在只能在https 協(xié)議下的域名才能訪問(wèn)的到；其他 http 協(xié)議的域名里會(huì)提示 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)聽(tīng) cookie 的變化；

前 4 個(gè)方法天然支持 Promise。接下來(lái)我們一個(gè)個(gè)來(lái)了解下。

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è)置更多的屬性，例如過(guò)期時(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ù)都會(huì)默認(rèn)先執(zhí)行toString()，然后再進(jìn)行存儲(chǔ)，因此有些非基本類型的數(shù)據(jù)，最好先轉(zhuǎn)換好。

上面都是我們?cè)O(shè)置 cookie 成功的情況，那么什么時(shí)候會(huì)設(shè)置失敗呢？在本地 localhost 環(huán)境會(huì)設(shè)置失敗。

本地 localhost，我們是能獲取到cookieStore這個(gè)全局變量，也能執(zhí)行相應(yīng)的方法，但無(wú)法設(shè)置成功：

cookieStore.set('username', 'wenzi');

瀏覽器會(huì)發(fā)出提示，無(wú)法在不安全的域名下通過(guò) 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í)，不能直接通過(guò)下面的方式判斷，還得新增一個(gè)頁(yè)面 url 的協(xié)議來(lái)判斷：

typeof cookieStore === 'object'; // 判斷不準(zhǔn)確，本地localhost也會(huì)存在

應(yīng)當(dāng)使用：

const isSupportCookieStore = typeof cookieStore === 'object' && location.protocol === 'https:'; // 只有在https協(xié)議下才使用cookieStore

2.3 獲取 cookie

cookieStore.get(name)方法可以獲取 name 對(duì)應(yīng)的 cookie，會(huì)以 Promise 格式返回所有的屬性：

await cookieStore.get('username');

get()方法還可以接收一個(gè) Object 類型，測(cè)試后發(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)與通過(guò) get()方式獲取到的格式一樣；若當(dāng)前域沒(méi)有 cookie，或者獲取不到指定的 cookie，則為空數(shù)組；

await cookieStore.getAll();

getAll()方法也可以傳入一個(gè) name，用來(lái)獲取對(duì)應(yīng)的 cookie：

await cookieStore.getAll('username');
await cookieStore.getAll({ name: 'username' });

2.5 刪除 cookie

cookieStore.delete(name)用來(lái)刪除指定的 cookie：

cookieStore
  .delete('age')
  .then(() => console.log('刪除age成功'))
  .catch(() => console.error('刪除age失敗'));

刪除成功后則會(huì)提示刪除成功。

即使刪除一個(gè)不存在的 cookie，也會(huì)提示刪除成功。因此，當(dāng)再次執(zhí)行上面的代碼時(shí)，還是會(huì)正常提示。

同樣的，在 localhost 環(huán)境下會(huì)提示刪除失敗。

2.6 監(jiān)聽(tīng) cookie 的變化

我們可以通過(guò)添加change事件，來(lái)監(jiān)聽(tīng) cookie 的變化，無(wú)論是通過(guò) cookieStore 操作，還是直接操作 document.cookie，都能監(jiān)聽(tīng)。

添加監(jiān)聽(tīng)事件：

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í)，會(huì)觸發(fā) change 事件，同時(shí)影響的 cookie 會(huì)放在event.changed數(shù)組中。

通過(guò) document.cookie 設(shè)置或者刪除的 cookie，均認(rèn)為是在修改 cookie，而不是刪除。

每次設(shè)置 cookie 時(shí)，即使兩次的 name 和 value 完全一樣，也會(huì)觸發(fā)change事件。

cookieStore.set('math', 90);

2.6.2 刪除操作

通過(guò) delete()方法刪除一個(gè)存在的 cookie 時(shí)，會(huì)觸發(fā) change 事件，被刪除的 cookie 會(huì)放在event.deleted數(shù)組中。

如果刪除一個(gè)不存在的 cookie，則不會(huì)觸發(fā) change 事件。

cookieStore.delete('math');

可以看到，當(dāng)?shù)诙蝿h除 name 為 math 的 cookie 時(shí)，就沒(méi)有觸發(fā) change 事件。

3. 總結(jié)

我們整篇了解了下cookieStore的使用和操作，要比我們直接操作 cookie 簡(jiǎn)便的多，而且還可以通過(guò)自身的 change 事件來(lái)監(jiān)聽(tīng) cookie 的變化。

以上就是詳解操作cookie的原生方法cookieStore的詳細(xì)內(nèi)容，更多關(guān)于cookie的原生方法cookieStore的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論