还在用document.cookie操作cookie吗？试试这个CookieStore│js

还在用document.cookie操作cookie吗？试试这个CookieStore

freeflydom

2025年4月12日 10:29 本文热度 130

以前在开发时想要获取和修改cookie一直都是使用document.cookie来进行操作的，而且cookie的属性又很多，赋值起来十分不方便，并且获取的时候不能根据属性名进行精确获取单独的一条cookie，真的很难搞诶。那有没有什么比较现代化的API来帮助我们更好的处理cookie呢。

需弃用的`document.cookie`

我们先来看看document.cookie处理方式

假设我想要获取当前文档某一个cookie，那我也必须使用document.cookie来获取所有非httpOnly, secure的cookie，然后在进行提取。

有时候我们写模板就需要通过结果去获取数据，但是接口有需要使用cookies中的某个cookie，所以就需要进行额外提取。比如我要获取alimail的_csrf_token_cookie，就需要下面这样提取。

document.cookie
  .split("; ") // 以分号和空格分隔
  .find((item) => item.includes("_csrf_token_="))
  ?.replace("_csrf_token_=", "");

目前在开发中前端写入cookie没有遇见，但是也很麻烦，特别是在定义cookie的不同属性，而且不支持一次性写入多cookie。

并且设置的时候还有些特殊的限制需要注意。

路径限制
- 设置 Path=/app 时，该 Cookie 仅在路径 /app 及其子路径（如 /app/sub）下生效。
- 若当前页面路径不在 /app 或其子路径下，浏览器会忽略此 Cookie。

域名不匹配
- 默认情况下，Cookie 的 Domain 属性为当前页面的域名。
- 若尝试设置跨域 Cookie（如从 www.example.com 设置 Domain=example.com），需确保当前域名是子域名且符合浏览器安全策略。
未编码特殊字符
- 由于;、,、空格等符号在cookie中有特殊用处，键值不包含它们，如果包含需使用 encodeURIComponent() 编码。

各位兄弟你们在日常开发中如何使用的cookie啊。

赶快来使用`CookieStore`

CookieStore 是浏览器提供的一个新的 API，旨在更现代化、更便捷地管理 Cookie。

异步操作：基于 Promise，避免传统 document.cookie 同步操作可能导致的性能问题。
类型安全：直接操作 Cookie 对象（键值对），而非手动解析字符串。
Service Worker 支持：可在 Service Worker 中读写 Cookie，实现离线场景下的 Cookie 管理。
细粒度控制：支持设置 Cookie 的路径、域名、过期时间、安全属性等。
事件监听：可监听 Cookie 的变化（新增、修改、删除）。

写入`set`

自动化的检测，我们再也不用被耍了，通过document.cookie明明设置了对应的cookie，为啥获取不到呢。让我们自己掌控我们的定义，设置的有问题直接抛错。

const zh = await cookieStore.set({
  name: 'zh',
  value: 'llm',
  expires: Date.now() + 24 * 60 * 60 * 1000, // 1天后过期
  domain: 'juejin.cn',
  path: '/',
  secure: true,
  sameSite: 'lax'
});

获取`get, getAll`

get 通过cookieName获取某个指定cookie。对于同名的cookie，应该会获取最后一次添加的。

const zh = await cookieStore.get("zh")

getAll 获取所有非httpOnly, secure的cookie。

const allCookies = await cookieStore.getAll();

删除`delete`

对于同名cookie，也是删除最后一次添加的。

const delZh = await cookieStore.delete('zh');

change事件

因为CookieStore继承了EventTarget所以它理所应当的可以监听事件，刚好html5提供了一个change事件可以监听cookie的变化。

event.changed可以拿到所有添加的cookie。
event.deleted可以拿到所有删除的cookie。

cookieStore.addEventListener('change', event => {
  event.changed.forEach(cookie => {
    console.log(`Cookie 被修改: ${cookie.name} = ${cookie.value}`);
  });
  event.deleted.forEach(cookie => {
    console.log(`Cookie 被删除: ${cookie.name}`);
  });
});