Cookie Store API 异步Cookie

Cookie Store API（异步操作Cookie/替代document.cookie）：cookieStore.set({name,value,expires,path,domain,secure,httpOnly, sameSite})/get/delete/getAll、change事件监听Cookie变更、Service Worker中也可使用 · 难度：入门 · +10XP

Cookie Store API —— 优雅的异步Cookie操作

document.cookie是一个设计糟糕的API——读写都是字符串拼接，没有异步支持。Cookie Store API提供了Promise-based的现代接口。

基本操作

// 设置Cookie
await cookieStore.set({
  name: 'theme', value: 'dark',
  expires: Date.now() + 86400000, // 1天后过期
  path: '/'
});
// 读取Cookie
const cookie = await cookieStore.get('theme');
console.log(cookie?.value); // 'dark'
// 获取所有Cookie
const allCookies = await cookieStore.getAll();
// 监听变更
cookieStore.addEventListener('change', event => {
  console.log('Cookie变了：', event.changed, event.deleted);
});

动手练习

1. 基础练习：用Cookie Store API设置、读取、删除Cookie。
2. 进阶应用：用change事件监听Cookie变化，实现跨标签页同步。
3. 项目实战：把项目中的document.cookie替换为Cookie Store API。