Cookie Store API：Service Worker Cookie 读写与订阅

---

title: Cookie Store API：Service Worker Cookie 读写与订阅

keywords:

• Cookie Store
• cookiechange
• Service Worker
• SameSite
• Secure

description: 通过 Cookie Store 在主线程与 Service Worker 中读写并订阅变更事件，改善对会话与权限状态的管理，含安全与兼容建议。

categories:

• 文章资讯
• 技术教程

---

概述

Cookie Store API 在安全上下文中提供 cookieStore.get/set/delete 与 cookiechange 事件，允许在 Service Worker 中订阅 Cookie 变化以同步应用状态。

用法/示例

// 主线程读写
await cookieStore.set({ name: 'token', value: 'abc', path: '/', secure: true, sameSite: 'Lax' })
const token = await cookieStore.get('token')

// SW 中订阅变化
self.addEventListener('cookiechange', event => {
  for (const c of event.changed) {
    if (c.name === 'token') {/* 更新客户端状态 */}
  }
})

工程建议

• 强制 Secure 与合理的 SameSite，避免跨站请求风险；设置精确的 path 与过期时间。
• 在不支持的浏览器降级为传统 document.cookie 与轮询策略。
• 避免存储敏感信息，令牌建议使用短期与绑定设备/会话的策略。

参考与验证

• MDN：Cookie Store API — https://developer.mozilla.org/docs/Web/API/Cookie_Store_API
• web.dev：Cookie Store — https://web.dev/articles/cookie-store