CookieStore

Baseline 2025 *

Neu verfügbar

Seit June 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Service Workers verfügbar.

Das CookieStore Interface der Cookie Store API bietet Methoden zum asynchronen Abrufen und Setzen von Cookies, sowohl von einer Seite als auch von einem Service Worker aus.

Auf das CookieStore wird über Attribute im globalen Kontext eines Window oder ServiceWorkerGlobalScope zugegriffen. Es gibt daher keinen Konstruktor.

Instanzmethoden

CookieStore.delete(): Die delete()-Methode löscht ein Cookie mit dem angegebenen name oder dem options-Objekt. Sie gibt ein Promise zurück, das aufgelöst wird, wenn das Löschen abgeschlossen ist oder wenn keine Cookies übereinstimmen.
CookieStore.get(): Die get()-Methode ruft ein einzelnes Cookie mit dem gegebenen name oder options-Objekt ab. Sie gibt ein Promise zurück, das mit den Details eines einzelnen Cookies aufgelöst wird.
CookieStore.getAll(): Die getAll()-Methode ruft alle übereinstimmenden Cookies ab. Sie gibt ein Promise zurück, das mit einer Liste von Cookies aufgelöst wird.
CookieStore.set(): Die set()-Methode setzt ein Cookie mit dem gegebenen name und value oder options-Objekt. Sie gibt ein Promise zurück, das aufgelöst wird, wenn das Cookie gesetzt ist.

Ereignisse

change: Das change-Ereignis wird ausgelöst, wenn eine Änderung an einem Cookie vorgenommen wird.

Beispiele

Die folgenden Beispiele können getestet werden, indem man den Code in eine Testumgebung kopiert und mit einem lokalen Server ausführt oder auf einer Website wie GitHub Pages bereitstellt.

Cookies setzen

Dieses Beispiel zeigt, wie Cookies durch Angabe eines name und value sowie durch Festlegen eines options-Wertes gesetzt werden.

Die cookieTest()-Methode setzt ein Cookie mit den Eigenschaften name und value und ein anderes mit den Eigenschaften name, value und expires. Anschließend verwenden wir die Methode CookieStore.get(), um jedes der Cookies abzurufen, die dann protokolliert werden.

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();

Hinweis: In unterstützenden Browsern können Sie das Ablaufdatum des Cookies mit maxAge anstelle von expires festlegen.

Cookies abrufen

Dieses Beispiel zeigt, wie Sie ein bestimmtes Cookie mithilfe von CookieStore.get() oder alle Cookies mithilfe von CookieStore.getAll() abrufen können.

Der Beispielcode setzt zuerst drei Cookies, die wir zur Demonstration der Abrufmethoden verwenden. Zuerst erstellt er cookie1 und cookie2 mit der Methode CookieStore.set(). Dann erstellt es ein drittes Cookie mit der älteren synchronen Document.cookie-Eigenschaft (nur um zu zeigen, dass auch diese mithilfe der get()- und getAll()-Methoden abgerufen werden).

Der Code verwendet dann CookieStore.get(), um "cookie1" abzurufen und dessen Eigenschaften zu protokollieren, und CookieStore.getAll() (ohne Argumente), um alle Cookies im aktuellen Kontext abzurufen.

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 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();

Das Beispiel sollte "cookie1" und alle drei Cookies separat protokollieren. Ein zu beachtender Punkt ist, dass das Cookie, das mit Document.cookie erstellt wurde, möglicherweise einen anderen Pfad hat als jene, die mit set() erstellt wurden (was standardmäßig auf / gesetzt ist).

Benanntes Cookie löschen

Dieses Beispiel zeigt, wie Sie ein benanntes Cookie mit der Methode delete() löschen.

Der Code setzt zuerst zwei Cookies und protokolliert sie in der Konsole. Dann löschen wir eines der Cookies und listen anschließend alle Cookies erneut auf. Das gelöschte Cookie ("cookie1") ist im ersten Protokollarray vorhanden, jedoch nicht im zweiten.

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();

Spezifikationen

Spezifikation
Cookie Store API # CookieStore

Browser-Kompatibilität

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden