CookieChangeEvent.deleted — Eigenschaft · JavaScript-Referenz

Signatur

CookieChangeEvent.deleted

Beschreibung

Die Eigenschaft deleted gehört zu einem CookieChangeEvent. Dieses Ereignis löst die Cookie Store API auf cookieStore aus, sobald sich Cookies ändern. deleted enthält ein eingefrorenes Array (FrozenArray) von Cookie-Objekten, die bei dieser Änderung entfernt wurden. Die zweite Hälfte der Änderung, also neu gesetzte oder überschriebene Cookies, steht in CookieChangeEvent.changed.

Als gelöscht gilt ein Cookie, wenn er ausdrücklich entfernt wird, etwa mit cookieStore.delete(), mit document.cookie und einem Ablaufdatum in der Vergangenheit oder durch einen Set-Cookie-Header des Servers. Auch Cookies, die mit einem bereits abgelaufenen Datum gesetzt werden, tauchen in deleted auf und nicht in changed.

Typische Einsätze sind:

Abmeldungen über mehrere Tabs hinweg erkennen, wenn ein Sitzungs-Cookie verschwindet.
Den Zustand der Oberfläche anpassen, etwa ein Einwilligungsbanner erneut anzeigen.
Zwischengespeicherte Daten im Service Worker verwerfen.

Das ist deutlich effizienter, als document.cookie regelmäßig abzufragen.

Rückgabewert

Typ

ReadonlyArray<CookieListItem>

Beschreibung

Ein eingefrorenes Array von Objekten, eines pro gelöschtem Cookie. Jedes Objekt hat mindestens name. Je nach Browser kommen weitere Felder hinzu: value, domain, path, expires, secure, sameSite und partitioned. Wurde nichts gelöscht, ist das Array leer.

Beispiele

Gelöschte Cookies mit addEventListener protokollieren

cookieStore.addEventListener('change', (event) => {
  for (const cookie of event.deleted) {
    console.log(`Gelöscht: ${cookie.name}`);
  }
});

// Änderung auslösen
await cookieStore.set('theme', 'dark');
await cookieStore.delete('theme');

Gelöscht: theme

Abmeldung in allen Tabs erkennen (onchange-Eigenschaft)

const SESSION_COOKIE = 'session_id';

cookieStore.onchange = (event) => {
  const loggedOut = event.deleted.some((c) => c.name === SESSION_COOKIE);
  if (loggedOut) {
    console.log('Sitzung beendet – Weiterleitung zur Anmeldung');
    location.assign('/login');
  }
};

Sitzung beendet – Weiterleitung zur Anmeldung

Abgelaufenes Setzen landet in deleted

cookieStore.addEventListener('change', ({ changed, deleted }) => {
  console.log('changed:', changed.map((c) => c.name));
  console.log('deleted:', deleted.map((c) => c.name));
});

await cookieStore.set('promo', 'x');
// Ablaufdatum in der Vergangenheit => gilt als Löschung
await cookieStore.set({ name: 'promo', value: 'x', expires: Date.now() - 1000 });

changed: ["promo"] deleted: [] changed: [] deleted: ["promo"]

Im Service Worker auf gelöschte Cookies reagieren

// sw.js
self.addEventListener('activate', (event) => {
  event.waitUntil(
    self.registration.cookies.subscribe([{ name: 'session_id', url: '/' }])
  );
});

self.addEventListener('cookiechange', (event) => {
  if (event.deleted.length > 0) {
    // Nutzerbezogene Caches verwerfen
    event.waitUntil(caches.delete('user-data'));
  }
});

// Wichtig · Fallstricke

Nur lesbar: Das Array ist eingefroren. push() oder Zuweisungen haben keine Wirkung und werfen im strikten Modus einen TypeError. Wer eine veränderbare Kopie braucht, nimmt [...event.deleted].
Wert oft leer: Bei gelöschten Cookies fehlt value meist oder ist leer. Deshalb nur name (und gegebenenfalls path/domain) zum Abgleich verwenden.
HttpOnly-Cookies sind für Skripte unsichtbar. Ihr Löschen erscheint nicht in deleted.
Sicherer Kontext: cookieStore gibt es nur über HTTPS bzw. auf localhost.
Browser-Unterstützung: Chromium-Browser ab Version 87. Safari und Firefox unterstützen die API erst seit Kurzem (Safari 18.4, Firefox 140), zum Teil eingeschränkt. Vorher mit 'cookieStore' in self auf Unterstützung prüfen.
Service Worker: Dort heißt das Ereignis cookiechange (ein ExtendableCookieChangeEvent). Es kommt nur an, wenn der Worker sich vorher mit registration.cookies.subscribe() angemeldet hat.

Siehe auch

CookieChangeEvent CookieChangeEvent.changed CookieStore CookieStore.prototype.delete() ExtendableCookieChangeEvent BufferedChangeEvent.addedRanges