Cookie的用法

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

用 JS 操作 Cookie 其實是很麻煩的，并不存在一個簡單的 API 能讓我們獲取或者設置 Cookie。

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

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

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

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

以下是新內容的介紹。

獲取 Cookie

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

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

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

設置 Cookie

在之前我們如果需要設置 Cookie 的話，應該會寫以下類似的代碼，還是在操作 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
}復制代碼

現在我們可以通過 cookieStore.set 來很方便的設置 Cookie 了：

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

刪除 Cookie

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

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

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

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

同樣的，delete API 也有兩個函數簽名，單純字符串的時候等同于需要刪除 Cookie 的 name，傳個對象時簽名略有些與之前不同，需要注意簽名中可選屬性都是有默認值的：

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

監聽 Cookie 的改變

這個功能應該是之前沒有的，如今可以通過新的 API 監聽 Cookie 的改變及刪除。

當我們設置或者刪除 Cookie 時對應的事件就會拋出我們所改變的內容。

關于Cookie的用法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。