Window.cookieStore — Eigenschaft · JavaScript-Referenz

Signatur

get Window.cookieStore

Beschreibung

window.cookieStore ist der Einstieg in die Cookie Store API. Sie gibt ein CookieStore-Objekt zurück, mit dem du Cookies des aktuellen Dokuments asynchron lesen, setzen und löschen kannst. Die Methoden get(), getAll(), set() und delete() geben jeweils ein Promise zurück.

Die API ist die moderne Alternative zu document.cookie. Dort musst du einen einzigen String von Hand zerlegen und zusammensetzen, und der Zugriff blockiert den Hauptthread. Mit cookieStore bekommst du strukturierte Objekte (CookieListItem), klare Optionen wie expires, path, domain und sameSite sowie ein change-Ereignis. Damit bemerkst du Cookie-Änderungen, ohne regelmäßig nachfragen zu müssen (kein Polling).

Die Eigenschaft ist schreibgeschützt und gibt nur in sicheren Kontexten (HTTPS oder localhost) ein Objekt zurück. In Service Workern gibt es dasselbe Objekt über self.cookieStore (ServiceWorkerGlobalScope.cookieStore). Dort beobachtest du Änderungen über cookieStore.subscribe() und das Ereignis cookiechange.

Rückgabewert

Typ

CookieStore

Beschreibung

Das CookieStore-Objekt des aktuellen Dokuments. In nicht sicheren Kontexten und in Browsern ohne Unterstützung gibt es die Eigenschaft nicht (undefined).

Beispiele

Cookie lesen mit Prüfung, ob die API unterstützt wird

const readTheme = async () => {
  if (!('cookieStore' in window)) {
    // Ersatzlösung über document.cookie
    const match = document.cookie.match(/(?:^|;\s*)theme=([^;]*)/);
    return match ? decodeURIComponent(match[1]) : null;
  }
  const cookie = await cookieStore.get('theme');
  return cookie?.value ?? null;
};

readTheme().then((theme) => console.log('Theme:', theme));

Theme: dark

Cookie mit Ablaufdatum und SameSite setzen, danach löschen

const saveConsent = async () => {
  try {
    await cookieStore.set({
      name: 'consent',
      value: 'analytics',
      expires: Date.now() + 365 * 24 * 60 * 60 * 1000, // 1 Jahr
      path: '/',
      sameSite: 'lax'
    });
    console.log('Einwilligung gespeichert');
  } catch (err) {
    console.error('Cookie konnte nicht gesetzt werden:', err);
  }
};

const revokeConsent = async () => {
  await cookieStore.delete({ name: 'consent', path: '/' });
  console.log('Einwilligung widerrufen');
};

await saveConsent();
await revokeConsent();

Einwilligung gespeichert Einwilligung widerrufen

Alle Cookies auflisten

const cookies = await cookieStore.getAll();
for (const { name, value } of cookies) {
  console.log(`${name} = ${value}`);
}

theme = dark lang = de

Auf Cookie-Änderungen reagieren (change-Ereignis)

const onCookieChange = (event) => {
  for (const c of event.changed) console.log('Geändert:', c.name, c.value);
  for (const c of event.deleted) console.log('Gelöscht:', c.name);
};

cookieStore.addEventListener('change', onCookieChange);
// alternativ: cookieStore.onchange = onCookieChange;

await cookieStore.set('lang', 'de');
await cookieStore.delete('lang');

// Später wieder abmelden
cookieStore.removeEventListener('change', onCookieChange);

Geändert: lang de Gelöscht: lang

// Wichtig · Fallstricke

Nur sichere Kontexte: Über HTTP (außer localhost) gibt es window.cookieStore nicht. Prüfe die Unterstützung daher immer mit 'cookieStore' in window.
Browser-Unterstützung: Chromium-Browser seit Version 87. Firefox (ab 140) und Safari (ab 18.4) unterstützen die API erst seit Kurzem und teilweise eingeschränkt. Dort liefert CookieListItem zum Beispiel oft nur name und value, ohne domain, path oder expires. Für ältere Browser brauchst du eine Ersatzlösung über document.cookie.
HttpOnly-Cookies sind wie bei document.cookie nicht sichtbar und lassen sich nicht ändern. Sensible Sitzungs-Tokens gehören weiterhin in HttpOnly-Cookies, die der Server setzt. Denn Skripte, die über eine XSS-Lücke eingeschleust werden, können alles lesen, was cookieStore sieht.
set() und delete() geben einen abgelehnten Promise zurück, wenn Werte ungültig sind (z. B. ein leerer Name bei leerem Wert, Präfixe wie __Host- mit falschem path oder domain). Nutze daher try/catch.
expires ist ein Zeitstempel in Millisekunden (number), kein Datums-String.
Zum Löschen müssen path und domain zu den Angaben beim Setzen passen, sonst bleibt das Cookie bestehen.

Siehe auch

CookieStore CookieStore.prototype.get() CookieStore.prototype.set() CookieStore.prototype.delete() CookieChangeEvent Document.cookie ServiceWorkerGlobalScope.cookieStore