详解操作cookie的原生方法cookieStore

下面是详解操作cookie的原生方法cookieStore的完整攻略。

一、什么是cookieStore

cookieStore 是浏览器 JavaScript 运行时的一个 API，用来管理浏览器中所有的 cookie，可用于对 cookie 实现增删改查等操作。

二、cookieStore的基本使用方法

cookieStore API 可以使用在浏览器中的所有 JavaScript 上下文中，包括网页的 JavaScript、浏览器的扩展和插件、甚至是浏览器的 WebExtensions。

1. 获取所有的 cookie

获取所有的 cookie 方法如下：

const allCookies = await cookieStore.getAll();
console.log(allCookies);

其中 await 是 ES6 中的关键字，表示异步操作。

返回值是一个包含所有 cookie 的数组，例如：

[
  {
    name: "token",
    value: "abc123",
    domain: "example.com",
    path: "/",
    secure: true,
    httpOnly: false,
    sameSite: "no_restriction"
  },
  {
    name: "history",
    value: "def456",
    domain: "example.com",
    path: "/",
    secure: false,
    httpOnly: true,
    sameSite: "no_restriction"
  }
]

2. 添加 cookie

添加 cookie 的方法如下：

await cookieStore.set({
  name: "username",
  value: "johndoe",
  domain: "example.com",
  path: "/"
});

其中，domain 和 path 是 cookie 的域和路径，值为字符串。

3. 删除 cookie

删除 cookie 的方法如下：

await cookieStore.delete({ name: "token", url: "https://example.com/" });

其中，url 是指定要删除 cookie 的 URL 地址，再用 name 指定需要删除的 cookie 的名称。

三、cookieStore的注意事项

在使用 cookieStore API 的时候，需要注意以下几点：

1. cookieStore API 需要浏览器支持，早期的浏览器可能不支持。

2. 在不同的上下文中，cookieStore 的功能会有所差异。

3. 对于同一 URL 而言，同名的 cookie 会自动合并成一个。

四、示例说明

下面是两个使用 cookieStore API 的示例：

示例一：获取 cookie

(async () => {
  const allCookies = await cookieStore.getAll();
  console.log(allCookies);
})();

示例二：添加 cookie

(async () => {
  await cookieStore.set({
    name: "username",
    value: "johndoe",
    domain: "example.com",
    path: "/"
  });
})();

以上就是完整的关于操作cookie的原生方法cookieStore的攻略了。希望对你有所帮助！