Signatur
Beschreibung
Die Eigenschaft changed gehört zum CookieChangeEvent, das der cookieStore (Cookie Store API) auslöst, sobald sich Cookies ändern, die für das aktuelle Dokument sichtbar sind. Sie enthält alle Cookies, die neu angelegt oder überschrieben wurden. Gelöschte oder abgelaufene Cookies stehen dagegen in der Schwester-Eigenschaft deleted.
Jeder Eintrag ist ein CookieListItem-Objekt. Garantiert sind die Felder name und value. Je nach Browser kommen weitere Felder hinzu: domain, path, expires (Zeitstempel in Millisekunden oder null bei Sitzungs-Cookies), secure, sameSite ("strict", "lax" oder "none") und partitioned.
Sinnvoll ist das zum Beispiel, um den Anmeldestatus über mehrere Tabs hinweg abzugleichen, um auf geänderte Einwilligungs-Cookies zu reagieren oder um Cookie-Änderungen durch Skripte von Drittanbietern zu beobachten. So lässt sich das früher übliche Abfragen von document.cookie in festen Zeitabständen (Polling) ersetzen.
Rückgabewert
FrozenArray) mit Objekten, die jeweils ein geändertes Cookie beschreiben. Es ist leer, wenn das Event nur Löschungen enthält.Beispiele
Geänderte Cookies protokollieren
cookieStore.addEventListener('change', (event) => {
for (const cookie of event.changed) {
console.log(`Gesetzt/geändert: ${cookie.name} = ${cookie.value}`);
}
for (const cookie of event.deleted) {
console.log(`Gelöscht: ${cookie.name}`);
}
});
await cookieStore.set('theme', 'dark');Anmeldestatus über Tabs hinweg abgleichen (on-Property)
const updateLoginUi = (loggedIn) => {
document.body.classList.toggle('logged-in', loggedIn);
};
cookieStore.onchange = ({ changed, deleted }) => {
if (changed.some((c) => c.name === 'session')) {
updateLoginUi(true);
}
if (deleted.some((c) => c.name === 'session')) {
updateLoginUi(false);
}
};Details eines geänderten Cookies auswerten
cookieStore.addEventListener('change', ({ changed }) => {
const consent = changed.find((c) => c.name === 'consent');
if (!consent) return;
const ablauf = consent.expires
? new Date(consent.expires).toLocaleString('de-DE')
: 'Sitzungsende';
console.log(`Einwilligung: ${consent.value}, gültig bis ${ablauf}`);
});
await cookieStore.set({
name: 'consent',
value: 'analytics',
expires: Date.now() + 24 * 60 * 60 * 1000
});Array ist eingefroren
cookieStore.addEventListener('change', (event) => {
console.log(Object.isFrozen(event.changed));
// Zum Weiterverarbeiten eine Kopie anlegen
const kopie = [...event.changed].sort((a, b) => a.name.localeCompare(b.name));
console.log(kopie.map((c) => c.name));
});
await cookieStore.set('b', '2');// Wichtig · Fallstricke
- Nur in sicheren Kontexten (HTTPS oder
localhost) verfügbar. Vor der Nutzung mitif ('cookieStore' in window)prüfen. - Browserunterstützung: Chromium-Browser seit Version 87, Safari seit 18.4, Firefox seit 140. Firefox und Safari liefern in
CookieListItemteils nurnameundvalue. Aufdomain,expiresusw. solltest du dich also nicht verlassen. - Ein Cookie, das mit einem Ablaufdatum in der Vergangenheit gesetzt wird, erscheint nicht in
changed, sondern indeleted. HttpOnly-Cookies sind für Skripte unsichtbar und tauchen hier nie auf. Das gilt auch dann, wenn der Server sie ändert.- Das Array ist eingefroren:
push()odersort()direkt darauf werfen im strikten Modus einenTypeError. Lege vorher eine Kopie an. - In Service Workern gibt es stattdessen das
ExtendableCookieChangeEventmit der gleichenchanged-Eigenschaft. Dort musst du Änderungen vorher übercookieStore.subscribe()bzw.registration.cookies.subscribe()abonnieren.