StorageEvent.initStorageEvent() — Methode · JavaScript-Referenz

Signatur

StorageEvent.prototype.initStorageEvent(type, bubbles, cancelable, key, oldValue, newValue, url, storageArea)

Beschreibung

initStorageEvent() ist die alte Methode, mit der man ein StorageEvent vor dem Auslösen mit Werten füllt. Das Objekt wird zuerst mit document.createEvent("StorageEvent") erzeugt, dann mit initStorageEvent() befüllt und schließlich mit dispatchEvent() ausgelöst. Die Methode kommt noch aus der Zeit vor den Event-Konstruktoren.

In modernem Code solltest du stattdessen den Konstruktor new StorageEvent(type, init) verwenden. Er ist lesbarer, weil er ein Optionsobjekt statt acht Positionsparametern nimmt, und die Spezifikation empfiehlt ihn ausdrücklich. initStorageEvent() steht nur noch aus Gründen der Web-Kompatibilität in der HTML-Spezifikation.

Typische Einsatzfälle sind Tests und Simulationen. Der Browser feuert das storage-Ereignis normalerweise nur in anderen Tabs oder Fenstern, nicht in dem, das den Speicher geändert hat. Wenn du die eigene Synchronisationslogik im selben Tab testen willst, erzeugst du das Ereignis selbst und löst es auf window aus.

Die Methode wirkt nur, solange das Ereignis noch nicht ausgelöst wurde. Wird sie während oder nach dispatchEvent() aufgerufen, passiert nichts.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses, üblicherweise `"storage"`.
$bubbles	boolean	false	Ob das Ereignis im DOM nach oben weitergereicht wird (Bubbling).
$cancelable	boolean	false	Ob das Ereignis mit `preventDefault()` abgebrochen werden kann.
$key	string \| null	null	Der geänderte Schlüssel. `null` steht für `clear()`, also das Leeren des gesamten Speichers.
$oldValue	string \| null	null	Der vorherige Wert. `null`, wenn der Schlüssel neu angelegt wurde.
$newValue	string \| null	null	Der neue Wert. `null`, wenn der Schlüssel entfernt wurde.
$url	string	""	URL des Dokuments, in dem die Änderung stattfand.
$storageArea	Storage \| null	null	Der betroffene Speicherbereich, z. B. `localStorage` oder `sessionStorage`.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Die Methode verändert das Ereignisobjekt direkt.

Beispiele

Klassisch: createEvent + initStorageEvent + dispatchEvent

window.addEventListener('storage', (e) => {
  console.log(`${e.key}: ${e.oldValue} → ${e.newValue}`);
});

const event = document.createEvent('StorageEvent');
event.initStorageEvent(
  'storage',        // type
  false,            // bubbles
  false,            // cancelable
  'theme',          // key
  'light',          // oldValue
  'dark',           // newValue
  location.href,    // url
  localStorage      // storageArea
);

window.dispatchEvent(event);

theme: light → dark

Moderne Alternative: der StorageEvent-Konstruktor

window.addEventListener('storage', (e) => {
  console.log(e.key, e.newValue, e.storageArea === localStorage);
});

// Empfohlen statt initStorageEvent()
const event = new StorageEvent('storage', {
  key: 'theme',
  oldValue: 'light',
  newValue: 'dark',
  url: location.href,
  storageArea: localStorage
});

window.dispatchEvent(event);

theme dark true

Tab-Synchronisation im selben Tab testen (mit Fallback)

const applyTheme = (theme) => {
  document.documentElement.dataset.theme = theme;
  console.log('Theme angewendet:', theme);
};

window.addEventListener('storage', (e) => {
  if (e.storageArea === localStorage && e.key === 'theme') {
    applyTheme(e.newValue);
  }
});

// Hilfsfunktion: Konstruktor bevorzugen, sonst Altmethode
const simulateStorageChange = (key, oldValue, newValue) => {
  let event;
  try {
    event = new StorageEvent('storage', {
      key, oldValue, newValue, url: location.href, storageArea: localStorage
    });
  } catch {
    event = document.createEvent('StorageEvent');
    event.initStorageEvent('storage', false, false, key, oldValue, newValue, location.href, localStorage);
  }
  window.dispatchEvent(event);
};

localStorage.setItem('theme', 'dark');
simulateStorageChange('theme', 'light', 'dark');

Theme angewendet: dark

// Wichtig · Fallstricke

Veraltet: Nutze in neuem Code new StorageEvent(). initStorageEvent() ist nur noch aus Kompatibilitätsgründen spezifiziert und sollte nicht mehr eingesetzt werden.
Nur vor dem Auslösen wirksam: Wird die Methode auf einem Ereignis aufgerufen, das gerade oder bereits ausgelöst wurde, passiert nichts.
Kein echter Speicherzugriff: Ein selbst erzeugtes storage-Ereignis ändert localStorage nicht und erreicht auch keine anderen Tabs. Es ruft nur die Listener in dem Kontext auf, in dem du dispatchEvent() aufrufst.
isTrusted ist false: Code, der auf event.isTrusted prüft, kann synthetische Ereignisse von echten unterscheiden.
Reihenfolge der Parameter: Es gibt acht Positionsparameter, Verwechslungen (z. B. oldValue und newValue) passieren leicht. Auch deshalb ist das Optionsobjekt des Konstruktors vorzuziehen.
Browser-Unterstützung: Alle aktuellen Browser stellen die Methode bereit. Ältere Versionen einzelner Browser (z. B. frühe Firefox-Versionen) unterstützten sie nicht.

Siehe auch

MouseEvent.initMouseEvent() TimeEvent.initTimeEvent() CustomEvent.initCustomEvent() TextEvent.initTextEvent() Event.initEvent()