Hören Sie die änderungen mit "localStorage" auf dem gleichen Fenster

Ich hören wollen, weil Veränderungen in der localStorage-API auf der gleichen Seite (und Nicht in mehreren tabs wie die spec sagt).

Ich bin derzeit mit diesem code:

var storageHandler = function () {
    alert('storage event 1');
  };

  window.addEventListener("storage", storageHandler, false);

localStorage.setItem('foo', 'bar');

Kennt jemand eine vanilla-JavaScript-Weg zu hören, um Ereignisse auf localStorage-auf der einen Seite (ohne jQuery)

InformationsquelleAutor f.lorenzo | 2014-11-17
  1. 14

    Da JS ist die dynamische Sprache nur umschreiben ursprünglichen Funktionen.

    var originalSetItem = localStorage.setItem; 
localStorage.setItem = function(){
    document.createEvent('Event').initEvent('itemInserted', true, true);
    originalSetItem.apply(this, arguments);
}
    • Hurra für JavaScript und umschreiben ursprünglichen Funktionen!
    • rigtht aber vielleicht ist es ein guter Punkt zu bleiben und denke, dass warum - die W3C-Mitarbeiter beschlossen, aus Veranstaltungen nur für die verschiedenen Seiten.
    • Probleme entstehen, wenn das gleiche Ereignis überträgt, um alle Fenster, einschließlich der setting-Fenster. Hier haben Sie eingeführt, die eine eindeutige Ereignis-Typ, der vermeidet eine Menge Probleme
    • Was ist, wenn Sie den Wert in einer Komponente und hören möchten, von einem anderen ein?
    InformationsquelleAutor Roman Bekkiev
  2. 7

    Aktualisiert, obige Antwort, als Dokument.createEvent jetzt ist Teil eines alten, deprecated API.

    var originalSetItem = localStorage.setItem;

localStorage.setItem = function(key, value) {
  var event = new Event('itemInserted');

  event.value = value; //Optional..
  event.key = key; //Optional..

  document.dispatchEvent(event);

  originalSetItem.apply(this, arguments);
};

var localStorageSetHandler = function(e) {
  alert('localStorage.set("' + e.key + '", "' + e.value + '") was called');
};

document.addEventListener("itemInserted", localStorageSetHandler, false);

localStorage.setItem('foo', 'bar'); //Pops an alert

    https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

    • Diese Strategie scheint nicht zu funktionieren in Firefox. Zumindest nicht in der version 61.0.1. Vielleicht sind Sie nicht überschreiben dürfen native Funktionen, die in Firefox? Schwer zu sagen, weil ich kann nicht überprüfen Sie die Funktion im Firefox-Konsole.
    • Hmm, das ist bedauerlich. Keine Ahnung, warum. Aber man konnte immer schreiben einer benutzerdefinierten Funktion und rufen, dass anstelle der Verwendung und Modifizierung von localStorage.setItem direkt.
    • Das ist das, was ich am Ende machen.
    • In der storageHandler Funktion, gibt es eine Möglichkeit, ziehen Sie den Wert, der aktualisiert wurde aus der e parameter übergeben?
    • Ist es möglich, übergeben Sie den Wert, der Hinzugefügt wird, um die localStorage als Sie löst das Ereignis dann Holen Sie es aus dem Hörer?
    • Ja, Sie können Eigenschaften zuweisen, um das Event-Objekt, das Sie erstellt, ich habe es zum Beispiel. Ich habe gewählt, "value" und "key" als Namen für die Eigenschaft, aber Sie können wählen, alle Namen, die Sie bevorzugen.
    • Yup! Ich habe aktualisiert das Beispiel, um zu zeigen, wie Sie können hinzufügen Requisiten, um das Event-Objekt.
    • Danke. Sehr Geschätzt

    InformationsquelleAutor Amsvartner
Schreibe einen Kommentar