cookieStore:异步Cookie API

cookieStore Cookie JavaScript
2021-01-15 10:43:16
677 78 0

Web开发资深人士会注意到的JavaScript API世界中的一种模式是,我们一直在创建新的方法来完成曾经实现的较老,更粗暴的API。XMLHttpRequest成为了fetchAPI,一些电池(如Battery)变得异步了,还有许多其他示例。急需更新的另一个API是cookie API……我们终于得到了它:cookieStore。

新的cookie APIcookieStore是异步的,并提供了cookie管理的逻辑方法。您必须记住,以前获取和设置cookie的方法完全围绕着串联和解析[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的准确性!

如果您真的想看看现在如何向您显示Cookie,请访问您喜欢的网站并输入 [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');

这比将奇数字符串连接到已经很奇怪的字符串要好得多[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变更事件

如果您想知道何时创建,删除或修改Cookie,可以在上监听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?

作者介绍

用微信扫一扫

收藏