Cookie Store API

## 概念和用法

现存的获取和设置的 cookies 的方法包括将 `document.cookie` 作为键/值对字符串使用。除了麻烦且容易出错之外，在现代网络开发的背景下它也存在许多问题。

`document.cookie` 接口是同步、单线程和阻塞的。编写 cookie 时，你必须等待浏览器更新包含所有 cookies 的字符串。此外，依赖 document 意味着访问不到 document 对象的 Service Worker 无法访问 cookie。

`Cookie Store API` 提供了管理 Cookie 更新的方法。方法是异步和基于 Promise 的，因此不会阻塞事件循环。方法不依赖于 document，所以对于 Service Worker 也有效。获取和设置 cookie 的方法还通过错误消息提供了更多反馈。这意味着 Web 开发人员不必设置后，立即读取 cookie 来检查是否成功设置。

*此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。*

## CookieStore接口

### 1. CookieStore.delete()
delete() 方法通过 name 或 options 对象删除 cookie，返回一个删除完成后兑现的 Promise。
```javascript
cookieStore.delete('token').then(() => console.log('删除成功'))
```

### 2. CookieStore.get()
get() 方法获通过 name 或 options 对象获取一个 cookie，返回一个兑现为 cookie 详细信息的 Promise。
```javascript
cookieStore.get('token').then(cookie => console.log(cookie))
```

### 3. CookieStore.getAll()
getAll() 方法获取所有匹配的 cookie，返回一个兑现为 cookie 列表的 Promise。
getAll() 方法返回与传递给它的 name 或 options 匹配的所有 cookie 列表。不传递任何参数将返回当前上下文的所有 cookie。

#### 参数为name
记录 cookie 名称的字符串。
```javascript
cookieStore.getAll('token').then(cookie => console.log(cookie))
```
#### 参数为options
options包含name, url
```javascript
cookieStore.getAll({name: 'token', url: 'http://localhost'}).then(cookie => console.log(cookie))
```

### 4. CookieStore.set()
set() 方法通过给定的 name 和 value 或 options 对象设置 cookie，返回一个设置成功后兑现的 Promise。

```javascript
const day = 24 * 60 * 60 * 1000;
cookieStore
  .set({
    name: "cookie1",
    value: "cookie1-value",
    expires: Date.now() + day,
    domain: "example.com",
  })
  .then(
    () => {
      console.log("成功了！");
    },
    (reason) => {
      console.error("设置失败：", reason);
    },
  );
```
此外，Cookie Store API还支持change事件。

## change 事件

change 事件会在 cookie 发生更改时于 CookieStore 对象上触发。
```javascript
cookieStore.addEventListener("change", (event) => {
  console.log("cookie 变更事件");
});
```

参考: https://developer.mozilla.org/zh-CN/docs/Web/API/CookieStore

2025-03-25 16:42:36 149 0

本地IO操作之File System Access API

Cookie Store API

相关文章

参与讨论

选择你的头像