Web開發(fā)資深人士會注意到的JavaScript API世界中的一種模式是，我們一直在創(chuàng)建新的方法來完成曾經實現(xiàn)的較老，更粗暴的API。XMLHttpRequest成為了fetchAPI，一些電池（如Battery）變得異步了，還有許多其他示例。急需更新的另一個API是cookie API……我們終于得到了它：cookieStore。

新的cookie APIcookieStore是異步的，并提供了cookie管理的邏輯方法。您必須記住，以前獲取和設置cookie的方法完全圍繞著串聯(lián)和解析[removed]為字符串的方式。不相信我嗎 看看這個怪物！

[removed] =   '__Secure-COOKIENAME=cookie-value' +   '; Path=/' +   '; expires=Fri, 12 Aug 2016 23:05:17 GMT' +   '; Secure' +   '; Domain=example.org'; // now we could assume the write succeeded, but since // failure is silent it is difficult to tell, so we // read to see whether the write succeeded var successRegExp =   /(^|; ?)__Secure-COOKIENAME=cookie-value(;|$)/; if (String([removed]).match(successRegExp)) {   console.log('It worked!'); } else {   console.error('It did not work, and we do not know why'); }

讓我們集中精力使用這個新的APIcookieStore來提高Cookie的準確性！

如果您真的想看看現(xiàn)在如何向您顯示Cookie，請訪問您喜歡的網(wǎng)站并輸入 [removed]。驚恐的事件！

設定Cookie

cookieStore.set 允許您設置具有名稱，值和其他詳細信息的cookie：

// All cookieStore methods are async, so you can `await` or `then`/`catch` await cookieStore.set({    name: "dw-test",    value: 1,    domain: 'davidwalsh.name',    // Very far in the future!   expires: Date.now() + Date.now()  }); // Quick, naive set await cookieStore.set('key', 'value');

這比將奇數(shù)字符串連接到已經很奇怪的字符串要好得多[removed]！

取得Cookie

cookieStore.get 提供了一種獲取特定Cookie值的方法：

const testCookie = await cookieStore.get('dw-test'); {   domain: "davidwalsh.name",   expires: 3206289322149,   name: "dw-test",   path: "/",   sameSite: "strict",   secure: true,   value: "1", }

如果該cookie存在并且尚未過期，則將返回該cookie的值以及更多信息。是的-一種簡單的get方法，而不是解析字符串！眼淚在我眼眶上打滾！

刪除Cookie

我們可以使用cookieStore.delete刪除Cookie：

await cookieStore.delete('dw-test');

就像您期望的那樣簡單！

Cookie變更事件

如果您想知道何時創(chuàng)建，刪除或修改Cookie，可以在上監(jiān)聽change事件cookieStore：

cookieStore.addEventListener('change', event => {   console.log(`${event.changed.length} changed cookies`);   for (const cookie in event.changed)     console.log(`Cookie ${cookie.name} changed to ${cookie.value}`);   console.log(`${event.deleted.length} deleted cookies`);   for (const cookie in event.deleted)     console.log(`Cookie ${cookie.name} deleted`); });

我很高興老舊[removed]的東西已經被這個很棒但簡單的cookieStoreAPI所取代。使用JavaScript API向上和向上！您希望接下來改進哪些舊版API？