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

詳解操作cookie的原生方法cookieStore

 更新時(shí)間：2021年05月14日 10:58:45   作者：蚊子博客  
我們平時(shí)對 cookie 的增刪改查等操作，都是在操作document.cookie，這里我們介紹一個(gè)新方法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)文章

最新評論