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.