Cookie 居然可以這樣完成了

javascript欄位介紹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 不是把欄位刪了，而是把它過期。現在我們有了新的API 就不需這樣做了：

同樣的，

delete API 也有兩個函數簽名，單純字串的時候等同於需要刪除Cookie 的name，傳個物件時簽章略有些與之前不同，需要注意簽章中可選屬性都是有預設值的：

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

監聽Cookie 的改變

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

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

最後

以上就是本文的內容，連結是

cookieStore 的文檔，有興趣的讀者可以了解下。

前端前沿觀察者係列主題為關注前端方向的新API、規範、技術等，雖然我們短期內可能享受不到這些API 帶來的好處，但是總歸有一天或者說polyfill 能讓我們用到這些東西。

相關免費學習推薦：javascript#（影片）

######

以上是Cookie 居然可以這樣完成了的詳細內容。更多資訊請關注PHP中文網其他相關文章！