StorageEvent.url — Eigenschaft · JavaScript-Referenz

Signatur

StorageEvent.url

Beschreibung

Die schreibgeschützte Eigenschaft url eines StorageEvent enthält die vollständige URL des Dokuments, in dem ein Skript den Web Storage verändert hat, also mit setItem(), removeItem() oder clear(). Gemeint ist das auslösende Dokument, nicht das Dokument, das das Ereignis empfängt.

Das storage-Ereignis wird nur in anderen Fenstern bzw. Tabs derselben Origin ausgelöst, nicht in dem Fenster, das die Änderung vorgenommen hat. Mit url finden Sie also heraus, welche Seite (z. B. /einstellungen oder /warenkorb) die Änderung verursacht hat. Das hilft bei der Synchronisierung zwischen Tabs, beim Protokollieren und Debuggen und beim Ignorieren von Änderungen aus bestimmten Bereichen der Anwendung.

Weil alle beteiligten Dokumente dieselbe Origin haben müssen, unterscheiden sich die URLs nur in Pfad, Query-String und Fragment (Hash). Mit new URL(event.url) lassen sich diese Teile bequem auswerten.

Rückgabewert

Typ

string

Beschreibung

Die vollständige URL (inklusive Pfad, Query und ggf. Fragment) des Dokuments, dessen Skript die Speicheränderung ausgelöst hat. Bei einem manuell mit new StorageEvent() erzeugten Ereignis ohne Angabe von url ist der Wert ein leerer String "".

Beispiele

Herkunft einer Speicheränderung mit addEventListener protokollieren

// In Tab B ausführen, dann in Tab A (gleiche Origin) localStorage ändern
window.addEventListener('storage', (event) => {
  console.log(`Schlüssel "${event.key}" geändert von: ${event.url}`);
  console.log(`Alt: ${event.oldValue} → Neu: ${event.newValue}`);
});

// In Tab A (z. B. https://example.com/einstellungen):
// localStorage.setItem('theme', 'dark');

Schlüssel "theme" geändert von: https://example.com/einstellungen Alt: light → Neu: dark

Nur Änderungen aus einem bestimmten Bereich berücksichtigen (onstorage)

window.onstorage = (event) => {
  const { pathname } = new URL(event.url);

  // Nur auf Warenkorb-Änderungen aus dem Checkout reagieren
  if (event.key === 'cart' && pathname.startsWith('/checkout')) {
    const cart = JSON.parse(event.newValue ?? '[]');
    console.log(`Warenkorb aus ${pathname} aktualisiert: ${cart.length} Artikel`);
  }
};

Warenkorb aus /checkout/schritt-2 aktualisiert: 3 Artikel

StorageEvent manuell erzeugen, z. B. für Tests

const event = new StorageEvent('storage', {
  key: 'token',
  oldValue: null,
  newValue: 'abc123',
  url: 'https://example.com/login',
  storageArea: localStorage
});

console.log(event.url);
console.log(new StorageEvent('storage').url === '');

window.dispatchEvent(event); // löst eigene storage-Handler aus

https://example.com/login true

// Wichtig · Fallstricke

Nicht im auslösenden Tab: Das storage-Ereignis und damit url kommen nur in anderen Browsing-Kontexten derselben Origin an. Wer im selben Tab reagieren möchte, braucht einen eigenen Mechanismus, z. B. ein CustomEvent oder einen BroadcastChannel.
sessionStorage: Da sessionStorage auf einen Tab begrenzt ist, entstehen Ereignisse hier nur zwischen Dokumenten, die sich denselben Sitzungsspeicher teilen, etwa zwischen gleich-origin iframes im selben Tab.
Nicht mit document.URL verwechseln: event.url ist die URL des Senders. Die eigene URL liefert location.href.
Sicherheit: Die URL kann Query-Parameter mit sensiblen Daten enthalten, z. B. Tokens. Protokollieren Sie sie deshalb nicht ungefiltert und senden Sie sie nicht an Drittanbieter. Beim manuellen Aufruf von dispatchEvent() kann ein beliebiges Skript url frei setzen. Der Wert ist also kein Echtheitsnachweis.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Baseline). Ältere Internet-Explorer-Versionen nutzten zusätzlich die nicht standardisierte Eigenschaft uri.

Siehe auch

StorageEvent.key StorageEvent.newValue StorageEvent.oldValue StorageEvent.storageArea Storage.length