Start · Sprachen · JavaScript · Referenz · CookieStore.get()

CookieStore.get()

Methode

Liest asynchron ein einzelnes Cookie anhand von Name oder Optionsobjekt und liefert ein <code>Promise</code> mit dem Cookie-Objekt oder <code>null</code>.

seit JavaScript Chrome/Edge 87+, Opera 73+, Firefox 140+, Safari 1 Kategorie: webapi

Signatur

CookieStore.prototype.get(name) | CookieStore.prototype.get(options)

Beschreibung

Die Methode get() der CookieStore-Schnittstelle ist Teil der Cookie Store API. Sie ist die moderne, asynchrone Alternative dazu, document.cookie von Hand zu parsen. Statt eines Strings wie "a=1; b=2" bekommst du ein strukturiertes Objekt mit name, value, domain, path, expires, secure, sameSite und partitioned.

Du kannst get() entweder mit einem Cookie-Namen als String aufrufen oder mit einem Optionsobjekt, das name und/oder url enthält. Passen mehrere Cookies (etwa gleicher Name auf unterschiedlichen Pfaden), wird nur das erste Treffer-Cookie zurückgegeben. Wenn du alle haben willst, nimm getAll().

Die API steht im Fenster über window.cookieStore und in Service Workern über self.cookieStore zur Verfügung. Gerade im Service Worker ist das wichtig, denn dort gibt es kein document.cookie. Gibt es kein passendes Cookie, wird das Promise mit null erfüllt und nicht abgelehnt.

Parameter

Name Typ Default Beschreibung
$name string Name des gesuchten Cookies. Alternativ zu options.
$options { name?: string, url?: string } Optionsobjekt. name: Cookie-Name. url: URL, für die Cookies gesucht werden. Im Fenster-Kontext muss sie mit der URL des aktuellen Dokuments übereinstimmen, im Service Worker muss sie im eigenen Scope liegen.

Rückgabewert

Typ
Promise<CookieListItem | null>
Beschreibung
Ein Promise, das mit einem Cookie-Objekt ({ name, value, domain, path, expires, secure, sameSite, partitioned }) erfüllt wird, oder mit null, wenn kein passendes Cookie existiert. expires ist ein Zeitstempel in Millisekunden oder null bei Sitzungs-Cookies. Im Fenster-Kontext kann es sein, dass einige Felder fehlen oder null sind.

Beispiele

Cookie per Name auslesen

const readTheme = async () => {
  const cookie = await cookieStore.get('theme');
  if (cookie) {
    console.log(`Theme: ${cookie.value}`);
  } else {
    console.log('Kein Theme-Cookie gesetzt');
  }
};

await cookieStore.set('theme', 'dark');
await readTheme();
Theme: dark

Mit Optionsobjekt und Ablaufdatum prüfen

const session = await cookieStore.get({ name: 'session_id' });

if (session?.expires) {
  const restMin = Math.round((session.expires - Date.now()) / 60000);
  console.log(`Sitzung läuft in ${restMin} Minuten ab`);
} else if (session) {
  console.log('Sitzungs-Cookie ohne Ablaufdatum');
} else {
  console.log('Nicht angemeldet');
}
Sitzung läuft in 29 Minuten ab

Im Service Worker mit Feature-Detection und Fallback

// sw.js
self.addEventListener('fetch', (event) => {
  if (!('cookieStore' in self)) return; // API nicht verfügbar

  event.respondWith((async () => {
    const lang = await self.cookieStore.get('lang');
    const headers = new Headers(event.request.headers);
    headers.set('X-Lang', lang?.value ?? 'de');
    return fetch(new Request(event.request, { headers }));
  })());
});

Fallback auf document.cookie

const getCookie = async (name) => {
  if ('cookieStore' in window) {
    return (await cookieStore.get(name))?.value ?? null;
  }
  const match = document.cookie
    .split('; ')
    .find((c) => c.startsWith(`${name}=`));
  return match ? decodeURIComponent(match.slice(name.length + 1)) : null;
};

console.log(await getCookie('theme'));
dark

// Wichtig · Fallstricke

  • Nur in sicheren Kontexten: Die API gibt es nur unter HTTPS (oder localhost). Unter HTTP ist cookieStore undefined.
  • Browser-Unterstützung: Chromium-Browser seit Version 87, Firefox seit 140, Safari seit 18.4. In älteren Browsern brauchst du Feature-Detection ('cookieStore' in self) und einen Fallback auf document.cookie.
  • HttpOnly-Cookies sind wie bei document.cookie nicht sichtbar. get() liefert dann null.
  • Nur der erste Treffer: Gibt es mehrere Cookies mit demselben Namen (z. B. auf verschiedenen Pfaden), bekommst du nur eines zurück. Für alle Treffer nimm getAll().
  • Ein Aufruf ohne Argument oder mit leerem Optionsobjekt lehnt das Promise mit einem TypeError ab. Das passiert auch, wenn die url nicht passt (anderes Dokument oder außerhalb des Service-Worker-Scopes). Im Fenster-Kontext kann es außerdem einen SecurityError geben, etwa bei Origins mit dem Wert null (opak).
  • Der value kommt ohne Dekodierung zurück. Wenn beim Setzen URL-kodiert wurde, musst du ihn selbst dekodieren.