Cookie Store API：用Promise的方式，告别手写document.cookie

如果要评选一个前端最"反人类"的Web API，document.cookie绝对能排进前三。

干了这么多年，我每次在代码里看到需要手动拼接、用正则表达式去解析document.cookie的场景，都觉得难以置信------在async/await已经成为标配的今天，我们操作Cookie的方式，竟然还停留在"石器时代"。

我们来看看那段"不堪回首"的代码：

javascript 复制代码

// 设置一个cookie
document.cookie = "theme=dark; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

// 读取一个cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

简直是一场灾难。它不仅写法繁琐、易错，而且是完全同步的API。

但这种日子，可能要到头了。今天，我想和大家聊一个正在逐步普及的新API：Cookie Store API 。它用一种现代的、基于Promise的方式，让我们能更优雅、更安全地操作Cookie。

Cookie Store API挂载在全局的cookieStore对象上（注意，是window.cookieStore或self.cookieStore，不是document）。它把所有操作，都变成了清晰的、异步的方法。

我们来做个直接的对比：

1. 设置 Cookie

旧方法 ：document.cookie = "user=john; max-age=3600; path=/";

新方法 ：

javascript 复制代码

await cookieStore.set({
  name: 'user',
  value: 'john',
  expires: Date.now() + 3600 * 1000, // 1小时后过期
  path: '/'
});

2. 读取 Cookie

旧方法：手写正则或者字符串分割。

新方法 ：

javascript 复制代码

const userCookie = await cookieStore.get('user');
if (userCookie) {
  console.log(userCookie.name);   // 'user'
  console.log(userCookie.value);  // 'john'
}

3. 删除 Cookie

旧方法 ：设置一个过去的expires时间，一个"hack"手段。
新方法 ：
javascript 复制代码
```
await cookieStore.delete('user');
```

显而易见，Cookie Store API是结构化的、异步的、符合现代JavaScript开发习惯的。它彻底消除了手动解析和拼接字符串的必要，代码的可读性和健壮性都得到了质的提升。

在Service Worker里操作Cookie

如果说API更友好只是"锦上添花"，那么Cookie Store的这个特性，可以说是"雪中送炭"了。

长久以来的一个痛点是：Service Worker无法访问document.cookie。 因为Service Worker运行在独立的线程，没有document对象。这给PWA（渐进式Web应用）的开发带来了很多限制，比如在后台同步时，无法获取和更新认证信息。

Cookie Store API彻底解决了这个问题。 它同样可以在Service Worker的全局作用域中访问。

想象一个实战场景： 一个支持离线的PWA应用，用户在断网状态下，给一篇文章点了"点赞"。

页面端的JS捕捉到这个操作，通过postMessage把"点赞"这个意图，连同文章ID，发送给Service Worker。
Service Worker注册一个后台同步（Background Sync）任务。
当用户的设备恢复网络连接时，浏览器会自动触发Service Worker的sync事件。

在sync事件的监听器里，Service Worker就可以做这件事：

javascript 复制代码

// 在 service-worker.js 里
self.addEventListener('sync', event => {
  if (event.tag === 'like-sync') {
    event.waitUntil(async function() {
      // 在后台，也能轻松读取到认证cookie
      const authTokenCookie = await self.cookieStore.get('auth_token');
      if (authTokenCookie) {
        // 用获取到的token，在后台发起真正的API请求
        await fetch('/api/like', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${authTokenCookie.value}`
          },
          body: JSON.stringify({ /* ...被缓存的点赞数据... */ })
        });
      }
    }());
  }
});

这个特性，打通了Service Worker和浏览器Cookie之间的壁垒，为构建更强大的离线应用和后台同步功能，打开了全新的可能性。 作为技术探索者，这一点让我感到非常兴奋。

现在能用它吗？

聊了这么多好处，我们必须回到现实：浏览器兼容性如何？

好消息是：所有基于Chromium的浏览器（Chrome, Edge, Opera）在较新的版本中都已经支持。
坏消息是 ：截至2025年7月，Firefox和Safari默认仍未开启支持。

这意味着什么？ 作为团队负责人，我的建议是：

目前，还不能在面向所有用户的、核心的生产环境里，完全依赖它。它非常适合用在一些内部系统、Electron应用，或者你可以控制浏览器环境的场景中。或者封装一个Cookie操作的工具函数，内部优先判断window.cookieStore是否存在，如果存在就用新API，如果不存在，则降级回document.cookie的老方法。

Cookie Store API无疑是一个设计得非常出色的现代Web API。它用基于Promise的结构化方法，彻底解决了document.cookie几十年来的历史遗留问题，并且通过支持Service Worker，为Web应用带来了新的能力。

虽然它的全面普及还需要一些时间（我们在等待Firefox和Safari的跟进）🤯。

Cookie Store API：用Promise的方式，告别手写document.cookie

新旧对比：Cookie Store到底好在哪？

在Service Worker里操作Cookie

现在能用它吗？

新旧对比：`Cookie Store`到底好在哪？