DasCookieStore-Interface derCookie Store API bietet Methoden zum asynchronen Abrufen und Setzen von Cookies, sowohl von einer Seite als auch von einem Service Worker.

Auf dasCookieStore wird über Attribute im globalen Umfang in einemWindow oderServiceWorkerGlobalScope-Kontext zugegriffen. Daher gibt es keinen Konstruktor.

Instanzmethoden

CookieStore.delete()

Diedelete()-Methode löscht ein Cookie mit dem angegebenenname oderoptions-Objekt.Sie gibt einPromise zurück, das aufgelöst wird, wenn die Löschung abgeschlossen ist oder wenn keine Cookies übereinstimmen.

CookieStore.get()

Dieget()-Methode ruft ein einzelnes Cookie mit dem angegebenenname oderoptions-Objekt ab.Sie gibt einPromise zurück, das mit den Details eines einzelnen Cookies aufgelöst wird.

CookieStore.getAll()

DiegetAll()-Methode ruft alle übereinstimmenden Cookies ab.Sie gibt einPromise zurück, das mit einer Liste von Cookies aufgelöst wird.

CookieStore.set()

Dieset()-Methode setzt ein Cookie mit dem angegebenenname undvalue oderoptions-Objekt.Sie gibt einPromise zurück, das aufgelöst wird, wenn das Cookie gesetzt ist.

Ereignisse

change

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

Beispiele

Die folgenden Beispiele können getestet werden, indem der Code in eine Testumgebung kopiert und mit einemlokalen Server ausgeführt wird, oder durch das Bereitstellen auf einer Website wie GitHub Pages.

Setzen von Cookies

Dieses Beispiel zeigt, wie Cookies gesetzt werden, indem einname undvalue übergeben werden und indem einoptions-Wert gesetzt wird.

DiecookieTest()-Methode setzt ein Cookie mit den Eigenschaftenname undvalue und ein weiteres mit den Eigenschaftenname,value undexpires.Wir verwenden dann dieCookieStore.get()-Methode, 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();

Abrufen von Cookies

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

Der Beispielcode setzt zunächst drei Cookies, die wir zur Demonstration der Abrufmethoden verwenden werden.Zuerst wirdcookie1 undcookie2 mithilfe derCookieStore.set()-Methode erstellt.Dann wird ein drittes Cookie mithilfe der älteren synchronenDocument.cookie-Eigenschaft erstellt (nur um zu zeigen, dass diese auch mit denget()- undgetAll()-Methoden abgerufen werden).

Der Code verwendet dannCookieStore.get(), um "cookie1" abzurufen und seine Eigenschaften zu protokollieren, sowieCookieStore.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 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.Eine Sache, die zu beachten ist, ist, dass das Cookie, das mitDocument.cookie erstellt wurde, einen anderen Pfad haben kann als die mitset() erstellten (die standardmäßig auf/ gesetzt werden).

Löschen eines benannten Cookies

Dieses Beispiel zeigt, wie ein benanntes Cookie mit derdelete()-Methode gelöscht wird.

Der Code setzt zuerst zwei Cookies und protokolliert diese in der Konsole.Dann löschen wir eines der Cookies und listen alle Cookies erneut auf.Das gelöschte Cookie ("cookie1") ist im ersten Protokoll-Array vorhanden und im zweiten nicht mehr.

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

Browser-Kompatibilität