StorageEvent.storageArea — Eigenschaft · JavaScript-Referenz

Signatur

StorageEvent.storageArea

Beschreibung

Die schreibgeschützte Eigenschaft storageArea des StorageEvent-Interfaces verweist auf das Storage-Objekt, in dem die Änderung stattgefunden hat. Das ist entweder window.localStorage oder window.sessionStorage des empfangenden Dokuments.

Gebraucht wird die Eigenschaft vor allem, wenn ein gemeinsamer storage-Listener unterscheiden soll, welcher Speicher sich geändert hat, etwa per event.storageArea === localStorage. Man kann über storageArea auch direkt auf den Speicher zugreifen, zum Beispiel um weitere Schlüssel nachzulesen, ohne den Speichertyp im Code fest vorzugeben.

Wichtig: Das storage-Event wird nicht in dem Fenster ausgelöst, das die Änderung vorgenommen hat. Es kommt nur in anderen Fenstern oder Tabs desselben Ursprungs an. Bei sessionStorage betrifft das in der Praxis nur Dokumente, die denselben Sitzungsspeicher teilen, zum Beispiel iframes im selben Tab.

Rückgabewert

Typ

Storage | null

Beschreibung

Das Storage-Objekt, in dem die Änderung stattfand. Bei selbst erzeugten Events ohne Angabe von storageArea ist der Wert null.

Beispiele

Zwischen localStorage und sessionStorage unterscheiden

window.addEventListener('storage', (event) => {
  const bereich = event.storageArea === localStorage
    ? 'localStorage'
    : event.storageArea === sessionStorage
      ? 'sessionStorage'
      : 'unbekannt';

  console.log(`${bereich}: "${event.key}" geändert von ${event.oldValue} zu ${event.newValue}`);
});

// In einem ANDEREN Tab desselben Ursprungs:
// localStorage.setItem('theme', 'dark');

localStorage: "theme" geändert von light zu dark

Einstellungen über mehrere Tabs synchronisieren

const applySettings = (storage) => {
  const theme = storage.getItem('theme') ?? 'light';
  const fontSize = storage.getItem('fontSize') ?? '16';
  document.documentElement.dataset.theme = theme;
  document.documentElement.style.fontSize = `${fontSize}px`;
};

const onStorage = (event) => {
  // Nur auf localStorage reagieren, Rest ignorieren
  if (event.storageArea !== localStorage) return;
  // storageArea direkt nutzen, um alle relevanten Werte neu zu lesen
  applySettings(event.storageArea);
};

window.addEventListener('storage', onStorage);

// Später, z. B. beim Aufräumen einer Komponente:
// window.removeEventListener('storage', onStorage);

Eigenes StorageEvent mit storageArea erzeugen

const event = new StorageEvent('storage', {
  key: 'cart',
  oldValue: null,
  newValue: '["artikel-42"]',
  url: location.href,
  storageArea: localStorage
});

console.log(event.storageArea === localStorage);

const ohneBereich = new StorageEvent('storage', { key: 'x' });
console.log(ohneBereich.storageArea);

true null

// Wichtig · Fallstricke

Kein Event im auslösenden Fenster: Wer setItem() aufruft, bekommt im eigenen Fenster kein storage-Event. Die eigene UI muss man also direkt aktualisieren.
Vergleich per Identität: event.storageArea === localStorage funktioniert zuverlässig, weil der Wert auf das Storage-Objekt des empfangenden Fensters zeigt.
clear(): Nach storage.clear() sind key, oldValue und newValue jeweils null. storageArea ist trotzdem gesetzt und zeigt, welcher Speicher geleert wurde.
Selbst erzeugte Events: Ohne storageArea im Init-Objekt ist der Wert null. Vor dem Zugriff auf Methoden also prüfen.
Sicherheit: Werte aus dem Speicher können von anderen Skripten desselben Ursprungs stammen. Nie ungeprüft per innerHTML einfügen (XSS-Gefahr).
Kompatibilität: Wird von allen modernen Browsern unterstützt. In privaten Fenstern oder bei gesperrtem Speicher kann der Zugriff auf localStorage eine SecurityError-Ausnahme werfen.

Siehe auch

Storage StorageEvent.newValue StorageEvent.oldValue StorageEvent.key StorageEvent.url