无需登录 数据私有 本地保存

Cookie Store API演示 - 异步读写Cookie

8
0
0
0

Cookie Store API 演示

异步读写Cookie · Chrome 87+ 支持
API 就绪
Cookie Store API 不可用

您的浏览器不支持 Cookie Store API,或当前页面未在安全上下文(HTTPS/localhost)中运行。

支持的浏览器:Chrome 87+、Edge 87+、Opera 73+ | 需要HTTPS(localhost除外)

设置 Cookie
请输入Cookie名称
会话 15分钟 1小时 6小时 1天 7天 30天 自定义
分钟
快捷操作
查询结果

            
当前 Cookie 列表 0
变化日志 0

暂无变化记录

常见问题与知识点

Cookie Store API 是一个现代浏览器API,提供异步方式来读写Cookie。与传统 document.cookie 相比:

  • 异步操作:不会阻塞主线程,使用Promise处理结果
  • 结构化数据:返回包含name、value、expires、domain、path等属性的对象
  • 变化监听:可以通过 addEventListener('change', ...) 监听Cookie变化
  • Service Worker支持:在Service Worker中也能使用
  • 无需解析:不用手动解析分号分隔的字符串

目前支持情况:

  • Chrome 87+ ✅
  • Edge 87+ ✅
  • Opera 73+ ✅
  • Samsung Internet 14+ ✅
  • Firefox ❌(尚未支持)
  • Safari ❌(尚未支持)

可通过 if ('cookieStore' in window) 进行特性检测。

  • Lax(默认推荐):大多数跨站请求不发送Cookie,但顶级导航(如点击链接)会发送。平衡安全与体验。
  • Strict:完全禁止跨站请求携带Cookie,最安全但可能影响用户体验。
  • None:允许跨站请求携带Cookie,必须同时设置Secure属性(仅HTTPS)。

使用 cookieStore.delete(name)cookieStore.delete({name, path, domain})

重要:删除Cookie时必须匹配其path和domain属性。如果Cookie设置了特定path(如/app),删除时也需要指定相同的path。建议先用 getAll() 获取Cookie详情,再精确删除。

cookieStore.addEventListener('change', callback) 监听全局Cookie变化:

  • 事件对象包含 event.changed(被修改的Cookie数组)和 event.deleted(被删除的Cookie数组)
  • 同一域的其他标签页修改Cookie时,当前页面也会收到通知
  • 通过 document.cookie 或浏览器开发者工具修改Cookie也会触发
  • httpOnly的Cookie变化也会被监听到(但无法读取其值)