使用CookieStore设置和获取或者删除cookie

CookieStore是浏览器提供的现代API，隶属于Window对象，用于以异步、面向对象的方式操作Cookie。
cookieStore是基于promise设计的，所以可以用await来同步操作了，同时提供了监听cookie变化的能力

1. 设置cookie方法1

async function setUserCookie() {
  await cookieStore.set(
    'name', // cookie键名
    '张三', // cookie键值
    {
      maxAge: 3600 * 24 * 7, // 存活时间(过期时间)7天,单位是秒，替代传统expires
      path: '/', // cookie作用路径
      secure: true, // 仅HTTPS下生效
      sameSite: 'strict', // 防止CSRF攻击，可选strict/lax/none
      domain: 'www.baidu.com/' // cookie作用域
    }
  );
  console.log('设置user cookie成功');
}
setUserCookie();

2. 设置cookie方法2(推荐使用本方法，因为更符合开发习惯)

async function setTokenCookie() {
  await cookieStore.set({
    name: 'token1', // cookie键名
    value: 'token值', // cookie键值
    maxAge: 3600 * 24 * 7, // 存活时间(过期时间)7天,单位是秒，替代传统expires
    expires: new Date(Date.now() + 3600 * 1000 * 24 * 7), // 存活时间(过期时间)7天
    secure: true, // 仅HTTPS下生效
    sameSite: 'strict', // 防止CSRF攻击，可选strict/lax/none
  });
  console.log('设置token cookie成功');
}
setTokenCookie()

set方法会覆盖原有的cookie，maxAge和expires二选一即可，maxAge以秒为单位，更符合开发习惯写法

3. 获取单个cookie

async function getCookie() {
  const token = await cookieStore.get('token1');
  console.log(token); // {"domain": null,"expires": 1766475635313,"name": "token1","partitioned": false, "path": "/","sameSite": "strict","secure": true, "value": "token值"}
}
getCookie();

获取所有cookie

async function getAllCookie() {
  const allToken = await cookieStore.getAll();
  console.log(allToken); // [{name: 'token1', value: 'token值', expires: Date, maxAge: 3600 * 24 * 7, path: '/', secure: true, sameSite: 'strict'}]
}
getAllCookie();

4. 删除cookie

async function delCookie() {
  await cookieStore.delete('name', {
    path: '/',
    // domain: 'www.baidu.com' // 若设置时指定了domain，删除时必须一致
  });
  console.log('删除成功');
}
delCookie();

5. 监听cookie变化

function listenCookieChange() {
  cookieStore.addEventListener('change', (event) => {
    console.log('Cookie变化类型：', event.changed.length ? '新增/修改' : '删除');
    // 变化的Cookie列表
    event.changed.forEach(cookie => {
      console.log('修改的Cookie：', cookie.name, '->', cookie.value);
    });
    // 删除的Cookie列表
    event.deleted.forEach(cookie => {
      console.log('删除的Cookie：', cookie.name);
    });
  });
}
// 初始化监听
listenCookieChange();

当页面中任何Cookie发生变化时，change事件都会被触发，通过event.changed和event.deleted可清晰区分变化类型，实现登录状态同步、权限更新等场景的无缝衔接。

• 同源策略限制：与传统Cookie一致，CookieStore无法访问跨域Cookie，仅能操作当前域名下的Cookie
• Secure属性要求：当Cookie设置为secure: true时，仅能在HTTPS协议下操作，本地开发时可使用localhost绕过该限制。
• SameSite属性配置：为防止CSRF攻击，建议设置sameSite:'strict'或'sameSite:'lax'，若需要跨域访问Cookie，可设置为sameSite:'none'（需配合secure:true）