Cookie的用法

這篇文章將為大家詳細(xì)講解有關(guān)Cookie的用法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

用 JS 操作 Cookie 其實(shí)是很麻煩的，并不存在一個(gè)簡(jiǎn)單的 API 能讓我們獲取或者設(shè)置 Cookie。

唯一一個(gè)操作 Cookie 的 API 是 document.cookie，但是這句代碼使用起來很難受。如果說我們想要獲取一個(gè)需要的 Cookie，可能得先寫這么一個(gè) utils 函數(shù)：

function getCookie(name) {  const value = `; ${document.cookie}`;  const parts = value.split(`; ${name}=`);  if (parts.length === 2) return parts.pop().split(';').shift();
}復(fù)制代碼

但是在 Chrome 87 版本中我們無需再引入這樣的代碼了，取而代之的是新的 API：cookieStore。這是一個(gè)異步的 API，可以很方便地獲取設(shè)置以及監(jiān)聽 Cookie 的改變。

如果你想下載 beta 版本的 Chrome，可以在 此鏈接 中獲取。

以下是新內(nèi)容的介紹。

獲取 Cookie

剛才在上文中我們已經(jīng)了解到在之前獲取一個(gè)需要的 Cookie 是有多麻煩，如今我們只需一句話就可以獲取想要的內(nèi)容了。

cookieStore.get 有兩種函數(shù)簽名，前者我們可以通過傳入 cookie 的屬性去匹配想要的內(nèi)容，后者則是直接傳入 name 獲取。API 很符合直覺，比之前的方式不知道好到哪里去了。

當(dāng)然除了獲取單個(gè) cookie 之外，新的 API 還提供了獲取多個(gè) cookie 的方式。比如說現(xiàn)在我想獲取所有屬于某個(gè) domain 的 cookies，就可以使用如下方式：

設(shè)置 Cookie

在之前我們?nèi)绻枰O(shè)置 Cookie 的話，應(yīng)該會(huì)寫以下類似的代碼，還是在操作 document.cookie

const setCookie = (name, value, days = 7, path = '/') => {  const expires = new Date(Date.now() + days * 864e5).toUTCString()  document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path
}復(fù)制代碼

現(xiàn)在我們可以通過 cookieStore.set 來很方便的設(shè)置 Cookie 了：

set 函數(shù)支持兩種簽名，前者可以設(shè)置所有 Cookie 上的內(nèi)容，后者就是 key-value 的形式。

刪除 Cookie

說完獲取和刪除 Cookie，那么相應(yīng)的刪除操作肯定也是不能少的。

在這之前如果你想刪除一個(gè) Cookie，那么需要把這個(gè) Cookie 的過期時(shí)間設(shè)置在過去，過期了自然而然就失效了。

var delete_cookie = function(name) {    document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
};復(fù)制代碼

看起來很奇怪，想刪除一個(gè) Cookie 不是把字段刪了，而是把它過期?，F(xiàn)在我們有了新的 API 就不需這樣做了：

同樣的，delete API 也有兩個(gè)函數(shù)簽名，單純字符串的時(shí)候等同于需要?jiǎng)h除 Cookie 的 name，傳個(gè)對(duì)象時(shí)簽名略有些與之前不同，需要注意簽名中可選屬性都是有默認(rèn)值的：

dictionary CookieStoreDeleteOptions {
  required USVString name;
  USVString? domain = null;
  USVString path = "/";
};復(fù)制代碼

監(jiān)聽 Cookie 的改變

這個(gè)功能應(yīng)該是之前沒有的，如今可以通過新的 API 監(jiān)聽 Cookie 的改變及刪除。

當(dāng)我們?cè)O(shè)置或者刪除 Cookie 時(shí)對(duì)應(yīng)的事件就會(huì)拋出我們所改變的內(nèi)容。

關(guān)于Cookie的用法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。