Signatur
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
{ 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();
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');
}
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'));
// Wichtig · Fallstricke
- Nur in sicheren Kontexten: Die API gibt es nur unter HTTPS (oder
localhost). Unter HTTP istcookieStoreundefined. - 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 aufdocument.cookie. - HttpOnly-Cookies sind wie bei
document.cookienicht sichtbar.get()liefert dannnull. - 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
TypeErrorab. Das passiert auch, wenn dieurlnicht passt (anderes Dokument oder außerhalb des Service-Worker-Scopes). Im Fenster-Kontext kann es außerdem einenSecurityErrorgeben, etwa bei Origins mit dem Wertnull(opak). - Der
valuekommt ohne Dekodierung zurück. Wenn beim Setzen URL-kodiert wurde, musst du ihn selbst dekodieren.