`CookieStore` API

cookieStore 是一个比较新的web api
在 cookieStroe api 之前， 操作cookie :

	document.cookie = "theme=dark; path=/";
	console.log(document.cookie);

这种的问题：

• 只能返回一个字符串，需要自己手动解析key=value
• 不方便异步监听，无法知道cookie啥时候变了；
• 无法精准设置过期时间、SameSite、Secure 等属性，需要拼接字符串。
• 不适合 Service Worker（Service Worker 没有 document）。
• 。。。。

CookieStore API 设计得更现代化，解决了上述痛点：

✅提供Promise 风格的 api
✅ 可以在 Service Worker 和 Window 中使用
✅ 内置了监听 Cookie 变化的功能
✅ 支持直接设置属性（过期时间、path、SameSite 等）

cookieStore 对象挂在 window.cookieStore 上 常用方法：

方法	说明
cookieStore.get(name)	获取单个 Cookie，返回 Promise
cookieStore.getAll([name])	获取所有 Cookie，返回数组
cookieStore.set({ name, value, ...options })	设置 Cookie，支持属性
cookieStore.delete(name)	删除 Cookie
cookieStore.addEventListener('change', handler)	监听 Cookie 变化

获取cookie

 // 获取单个cookie
 const themeCookie = await cookieStore.get('theme')
 console.log(themeCookie); 
// { name: "theme", value: "dark", domain: "...", path: "/", ... }

// 获取所有cookie
const allcookie = await cookieStore.getAll()

设置cookie

 // 设置一个带有属性的cookie 
 await cookieStore.set({
	name: 'theme',
	value: 'dark',
	expires: Date.now() + 24 * 60 * 60 * 1000, // 1天后过期
	path: '/',
	sameSite: 'Lax',
  secure: true
})


// 这个 Cookie 只能通过 HTTPS 网站访问，防止被窃取。
// 跨站请求不会轻易携带这个 Cookie，能防御大部分 CSRF 攻击。
// 只有用户主动从别的页面跳转到你的网站（GET 链接点击），才会携带这个 Cookie。

删除cookie

await cookieStore.delete('theme')

监听cookie

 cookieStore.addEventListener('change', (e)=>{
	for(const cookie of e.changed){
		console.log('更新:', cookie.name, cookie.value);
	}
	for (const cookie of e.deleted) {
    console.log('删除:', cookie.name);
  }
})

检测来保证兼容性：

if ('cookieStore' in window) {
  console.log('支持 CookieStore API');
} else {
  console.log('不支持，使用 document.cookie');
}

sameSite: 'Lax' 和 secure: true
这两个是 设置cookie 的安全和 作用域策略

sameSite 控制跨站请求时，cookie 是否被发送，主要用于防御 CSRF（跨站请求伪造攻击）。
有三个取值：

值	行为	常见用途
Strict	只在同一站点请求时发送 Cookie，不随任何跨站请求发送	安全性最高，但可能影响用户体验（比如从其他网站点击链接跳回来后会丢失登录状态）
Lax ✅	在同站点请求总是发送，在部分“安全”的跨站请求也会发送（比如 <a> 跳转 GET 请求），但不会随跨站 POST、iframe、AJAX 请求发送	兼顾安全和可用性，现代浏览器的默认值
None	跨站请求也发送 Cookie，但必须配合 Secure: true	用于需要跨站点共享登录状态的场景（如单点登录、CDN API）

假设你的站点是 https://example.com：

如果 sameSite: ‘Strict’
用户从其他网站点链接跳转到 example.com，浏览器不会带上这个 Cookie（可能导致需要重新登录）。

如果 sameSite: ‘Lax’
点击链接跳转时会带上 Cookie（保持登录），但如果是恶意网站用 发 POST 请求，就不会带 Cookie（防御 CSRF）。
如果 sameSite: ‘None’
无论是 AJAX、iframe、跨域 POST 请求，都会带上 Cookie（需要 secure: true）。

secure: true 表示 这个 Cookie 只能通过 HTTPS 发送，HTTP 请求不会带上它。
这样可以防止 Cookie 在明文 HTTP 传输时被窃取（中间人攻击）。

建议：
登录态、敏感信息的 Cookie → 推荐 sameSite: ‘Lax’ 或 ‘Strict’ + secure: true

跨域共享的 Session Cookie（比如多站点 SSO） → 必须用 sameSite: ‘None’, secure: true