1. Web
  2. Web API
  3. CookieStore
  4. delete()

CookieStore: delete() 方法

基线 2025 *
新推出

自 2025 年 6 月起，此功能已在最新的设备和浏览器版本中可用。此功能可能不适用于旧设备或浏览器。

* 此特性的某些部分可能存在不同级别的支持。

安全上下文： 此功能仅在安全上下文（HTTPS）中可用，且支持此功能的浏览器数量有限。

注意：此功能在 Service Workers 中可用。

CookieStore 接口的 delete() 方法会删除与给定 name 或 options 对象匹配的 cookie。该方法通过将 cookie 的日期更改为过去某个日期来使其过期。

请注意，如果无法匹配 cookie，则不会报错：返回的 Promise 将在匹配的 cookie 被删除或未匹配到 cookie 时完成。

语法

js
delete(name)
delete(options)

参数

此方法需要以下之一：

name 可选

一个包含 cookie 名称的字符串。

或者

options 可选

一个包含以下内容的 Shoppee 对象：

name

一个包含 cookie 名称的字符串。

domain 可选

一个包含 cookie 域名的字符串。默认为 null。

path 可选

一个包含路径的字符串。默认为 /。

partitioned 可选

一个布尔值，默认为 false。将其设置为 true 可指定要删除的 cookie 是分区 cookie。有关更多信息，请参阅 Cookies Having Independent Partitioned State (CHIPS)。

返回值

一个 Promise，当删除操作完成或未匹配到 cookie 时，它将以 undefined 解析。

异常

SecurityError DOMException

如果源无法 序列化 为 URL，则抛出此异常。

TypeError

如果与给定 name 或 options 匹配的 cookie 无法被删除，则抛出此异常。

示例

此示例展示了如何通过将 cookie 的名称传递给 delete() 方法来删除 cookie。

如果待删除的 cookie 匹配 cookie 名称以及 options 的默认值，则此方法有效。如果 cookie 是仅使用名称和值 set() 的，则情况就是如此，但如果 cookie 是使用选项或 Document.cookie 创建的，则可能无效。

代码首先定义了 setTestCookies()，它创建了一些测试 cookie 并记录它们的名称。

js
async function setTestCookies() {
  // 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
  const cookieNames = (await cookieStore.getAll())
    .map((cookie) => cookie.name)
    .join(" ");
  console.log(`Initial cookies: ${cookieNames}`);
}

cookieTest() 方法调用 setTestCookies()。然后它删除刚刚创建的 "cookie1"，并再次列出所有 cookie 的名称。

js
async function cookieTest() {
  // Create our test cookies
  await setTestCookies();

  // Delete cookie1
  try {
    await cookieStore.delete("cookie1");
  } catch (error) {
    console.log(`Error deleting cookie1: ${error}`);
  }

  // Log cookie names again (to show cookie1 deleted)
  const cookieNames = (await cookieStore.getAll())
    .map((cookie) => cookie.name)
    .join(" ");
  console.log(
    `Cookies remaining after attempting to delete cookie1: ${cookieNames}`,
  );
}

cookieTest();

运行时，控制台日志应最初显示 cookie1 和 cookie2 都存在，但在删除 cookie1 后，它将不再列出。

此示例与上一个几乎相同，只是它演示了选项必须与待删除 cookie 的选项匹配。

代码首先定义了 setTestCookies()。此函数创建了两个 partitioned 属性设置为 true 的 cookie，并记录它们的名称。

js
async function setTestCookies() {
  // Set two cookies
  try {
    await cookieStore.set({
      name: "cookie1",
      value: `cookie1-value`,
      partitioned: true,
    });
  } catch (error) {
    console.log(`Error setting cookie1: ${error}`);
  }

  try {
    await cookieStore.set({
      name: "cookie2",
      value: `cookie2-value`,
      partitioned: true,
    });
  } catch (error) {
    console.log(`Error setting cookie2: ${error}`);
  }

  // Log cookie names
  const cookieNames = (await cookieStore.getAll())
    .map((cookie) => cookie.name)
    .join(" ");
  console.log(`Initial cookies: ${cookieNames}`);
}

cookieTest() 方法调用 setTestCookies()。然后它尝试删除名为 "cookie1" 的 cookie（指定其名称）和名为 "cookie2" 的 cookie（指定其名称和 partitioned: true）。然后该方法再次列出 cookie 的名称。

js
async function cookieTest() {
  // Create our test cookies
  await setTestCookies();

  // Delete cookie1 specifying just the name
  try {
    await cookieStore.delete("cookie1");
  } catch (error) {
    console.log(`Error deleting cookie1: ${error}`);
  }

  // Delete cookie2, setting partitioned to true
  try {
    await cookieStore.delete({
      name: "cookie2",
      partitioned: true,
    });
  } catch (error) {
    console.log(`Error deleting cookie2: ${error}`);
  }

  // Log cookie names again (to show cookie1 deleted)
  cookieNames = (await cookieStore.getAll())
    .map((cookie) => cookie.name)
    .join(" ");
  console.log(
    `Cookies remaining after attempted deletions (cookie2 should be deleted): ${cookieNames}`,
  );
}

cookieTest();

运行时，控制台日志应显示 "cookie1" 和 "cookie2" 最初都存在，但之后 "cookie2" 不再列出。名为 "cookie1" 的 cookie 仍然存在，因为它与 delete() 调用中指定的 cookie 不匹配。

注意：如果未匹配到 cookie，删除操作将静默失败。

删除使用 document.cookies 创建的 cookie

删除使用 document.cookie 创建的 cookie 需要满足与删除使用 CookieStore.set() 创建的 cookie 相同的要求：cookie 需要匹配传入的 options，或者匹配 name 和默认选项。

注意：使用 set() 创建的 cookie 始终具有 / 的 默认路径，而使用 document.cookie 创建的 cookie 的默认路径等于它们创建时文档的路径。因此，在删除使用 document.cookie 创建的 cookie 时，您不能假设它们的路径是 /（除非它已明确设置为这样），因此它将不匹配默认的 delete() 选项。

下面的代码使用 document.cookie 创建了名为 "doc_cookie1" 和 "doc_cookie2" 的 cookie，路径分别为 /some_path 和 /，然后记录这两个 cookie。代码接着在未指定 path 匹配选项的情况下删除这两个 cookie，并再次列出 cookie。

js
async function cookieTest() {
  // Create doc_cookie1 with path /some_path
  document.cookie =
    "doc_cookie1=doc_cookie1_name; SameSite=None; Secure; max-age=10; path='/some_path'";

  // Create doc_cookie2 with path / (the CookieStore.set() default)
  document.cookie =
    "doc_cookie2=doc_cookie2_name; SameSite=None; Secure; max-age=10; path=/";

  // Log cookie names
  let cookieNames = (await cookieStore.getAll())
    .map((cookie) => cookie.name)
    .join(" ");
  console.log(`Initial cookies: ${cookieNames}`);

  // Delete doc_cookie1 (should fail)
  try {
    await cookieStore.delete("doc_cookie1");
  } catch (error) {
    console.log(`Error deleting doc_cookie1: ${error}`);
  }

  // Delete doc_cookie2 (should succeed)
  try {
    await cookieStore.delete("doc_cookie2");
  } catch (error) {
    console.log(`Error deleting cookie2: ${error}`);
  }

  // Log cookie names again (to show cookie1 deleted)
  cookieNames = (await cookieStore.getAll())
    .map((cookie) => cookie.name)
    .join(" ");
  console.log(
    `Cookies remaining after attempted deletions (doc_cookie2 should be deleted): ${cookieNames}`,
  );
}

cookieTest();

运行时，第一个日志应显示两个 cookie 都存在。第二个日志不应包含 "doc_cookie2"，因为它应该已被匹配并删除。它应该包含 "doc_cookie1"，因为 /some_path 将不匹配默认删除路径（/）。

规范

规范
Cookie Store API
# dom-cookiestore-delete

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者 进行编辑。

在 GitHub 上查看此页面 • 报告此内容的错误
© . Content available under a Creative Commons license.