CookieStore
基线 2025 *
新推出
注意：此功能在 Service Workers 中可用。
CookieStore 接口是 Cookie Store API 的一部分，它提供了从页面或 Service Worker 异步获取和设置 cookie 的方法。
CookieStore 可在 Window 或 ServiceWorkerGlobalScope 上下文中通过全局作用域的属性访问。因此，它没有构造函数。
实例方法
-
delete()方法会删除具有给定name或options对象的 cookie。它返回一个Promise，该 Promise 在删除完成或没有匹配的 cookie 时解析。 -
get()方法会获取具有给定name或options对象的单个 cookie。它返回一个Promise，该 Promise 会解析为单个 cookie 的详细信息。 -
getAll()方法会获取所有匹配的 cookie。它返回一个Promise，该 Promise 会解析为 cookie 列表。 -
set()方法使用给定的name和value或options对象来设置 cookie。它返回一个Promise，该 Promise 在 cookie 设置完成后解析。
事件
change-
当任何 cookie 被更改时，会触发
change事件。
示例
下面的示例可以通过将代码复制到测试环境中并使用 本地服务器 运行，或将其部署到 GitHub Pages 等网站上进行测试。
设置 cookie
本示例展示了如何通过传递 name 和 value 来设置 cookie，以及通过设置 options 值来设置 cookie。
cookieTest() 方法使用 name 和 value 属性设置一个 cookie，并使用 name、value 和 expires 属性设置另一个 cookie。然后，我们使用 CookieStore.get() 方法获取每个 cookie，并将它们记录下来。
async function cookieTest() {
// Set cookie: passing name and value
try {
await cookieStore.set("cookie1", "cookie1-value");
} catch (error) {
console.log(`Error setting cookie1: ${error}`);
}
// Set cookie: passing options
const day = 24 * 60 * 60 * 1000;
try {
await cookieStore.set({
name: "cookie2",
value: "cookie2-value",
expires: Date.now() + day,
partitioned: true,
});
} catch (error) {
log(`Error setting cookie2: ${error}`);
}
// Get named cookies and log their properties
const cookie1 = await cookieStore.get("cookie1");
console.log(cookie1);
const cookie2 = await cookieStore.get("cookie2");
console.log(cookie2);
}
cookieTest();
获取 cookie
本示例展示了如何使用 CookieStore.get() 获取特定 cookie，或使用 CookieStore.getAll() 获取所有 cookie。
示例代码首先设置三个 cookie，用于演示获取方法。首先，它使用 CookieStore.set() 方法创建 cookie1 和 cookie2。然后，它使用较旧的同步 Document.cookie 属性创建第三个 cookie（以便我们展示这些 cookie 也可以使用 get() 和 getAll() 方法获取）。
然后，代码使用 CookieStore.get() 获取 "cookie1" 并记录其属性，然后使用 CookieStore.getAll()（不带参数）获取当前上下文中的所有 cookie。
async function cookieTest() {
// Set a cookie passing name and value
try {
await cookieStore.set("cookie1", "cookie1-value");
} catch (error) {
console.log(`Error setting cookie1: ${error}`);
}
// Set a cookie passing an options object
const day = 24 * 60 * 60 * 1000;
try {
await cookieStore.set({
name: "cookie2",
value: `cookie2-value`,
expires: Date.now() + day,
partitioned: true,
});
} catch (error) {
console.log(`Error setting cookie2: ${error}`);
}
// Set cookie using document.cookie
// (to demonstrate these are are fetched too)
document.cookie = "favorite_food=tripe; SameSite=None; Secure";
// Get named cookie and log properties
const cookie1 = await cookieStore.get("cookie1");
console.log(cookie1);
// Get all cookies and log each
const cookies = await cookieStore.getAll();
if (cookies.length > 0) {
console.log(`getAll(): ${cookies.length}:`);
cookies.forEach((cookie) => console.log(cookie));
} else {
console.log("Cookies not found");
}
}
cookieTest();
示例应分别记录 "cookie1" 和所有三个 cookie。需要注意的是，使用 Document.cookie 创建的 cookie 的路径可能与使用 set()（默认值为 /）创建的 cookie 不同。
删除命名 cookie
本示例展示了如何使用 delete() 方法删除命名 cookie。
代码首先设置两个 cookie 并将它们记录到控制台。然后，我们删除其中一个 cookie，然后再次列出所有 cookie。已删除的 cookie ("cookie1") 出现在第一个日志数组中，而未出现在第二个数组中。
async function cookieTest() {
// Set two cookies
try {
await cookieStore.set("cookie1", "cookie1-value");
} catch (error) {
console.log(`Error setting cookie1: ${error}`);
}
try {
await cookieStore.set("cookie2", "cookie2-value");
} catch (error) {
console.log(`Error setting cookie2: ${error}`);
}
// Log cookie names
let cookieNames = (await cookieStore.getAll())
.map((cookie) => cookie.name)
.join(" ");
console.log(`Initial cookies: ${cookieNames}`);
// Delete cookie1
await cookieStore.delete("cookie1");
// Log cookies again (to show cookie1 deleted)
cookieNames = (await cookieStore.getAll())
.map((cookie) => cookie.name)
.join(" ");
console.log(
`Cookies remaining after attempted deletions (cookie1 should be deleted): ${cookieNames}`,
);
}
cookieTest();
规范
| 规范 |
|---|
| Cookie Store API # CookieStore |
浏览器兼容性
加载中…