Lokales Speicherereignis kann nicht in Tabs angezeigt werden

Ich versuche, einen einfachen Proof-of-Concept bezüglich der Verwendung von localStorage zu erstellen, um Tabs in meiner Anwendung auszulösen, wenn Änderungen auftreten. Ich weiß, dass dies möglich ist, basierend auf anderen Artikeln, die ich gesehen habe. Ich verstehe the spec Staaten das Ereignis wird auf immer Seite außer die ich bin auf - das ist in der Tat, was ich will. Allerdings kann ich diese einfache Demo nicht wirklich funktionieren sehen.Lokales Speicherereignis kann nicht in Tabs angezeigt werden

Ich habe den folgenden Code genommen und mehrere Registerkarten davon geöffnet. Mit meinen Chrome Dev Tools kann ich> localStorage in der Konsole überprüfen und den Wert vor und nach dem Drücken der Schaltflächen "Hinzufügen" und "Löschen" sehen - sie funktionieren tatsächlich wie gewünscht beim Speichern und Löschen des Schlüsselwertpaars in Lokal Speicher, aber das Ereignis löst keine Warnung aus.

Ich habe in den Chrome-Entwicklungstools jedes Tabs sogar Haltepunkte in das JavaScript eingefügt, aber ich kann niemals die "onStorageEvent" -Funktion in einem geöffneten Tab finden.

Was mache ich falsch?

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Tab1</title> 
 
</head> 
 

 
<body> 
 
    <button id="add" onclick="localStorage.setItem('tab','changed')">Add</button> 
 
    <button id="clear" onclick="localStorage.clear()">Clear</button> 
 
    <script type="text/javascript"> 
 
    function onStorageEvent() { 
 
     alert("storage event: " + localStorage.getItem("tab")); 
 
    } 
 

 
    window.addEventListener('storage', onStorageEvent, false); 
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2016-08-15 freak

Dank Dekel getestet . Sobald ich es meinem Webserver hinzugefügt habe, haben sich die Dinge wie gewünscht verhalten! – freak

Damit die window.addEventListener auf storage arbeiten:

Sie MUST Zugriff auf die Seite mit Web-Server (http://a.b.c.d/ oder http://domain)
- Direkter Zugriff (unter Verwendung file:/// oder c:\file.html wird nicht Arbeit.
  (Chrome und ie ignorieren es, Firefox und Safari können es trotzdem ausführen).
halte ich würde auch die dritte Entfernung ist es nicht relevant für Elemente in Ihrem DOM Baum, und es könnte dazu führen, Probleme (lassen Sie den Browser hat es standardmäßig ist).

Dieser Code wurde in Chrome 52, 47 Firefox + 48, 11, IE Safari 5.7.1

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Tab1</title> 
 
</head> 
 

 
<body> 
 
    <button id="add" onclick="localStorage.setItem('tab','changed')">Add</button> 
 
    <button id="clear" onclick="localStorage.clear()">Clear</button> 
 
    <script type="text/javascript"> 
 
    function onStorageEvent() { 
 
     alert("storage event: " + localStorage.getItem("tab")); 
 
    } 
 

 
    window.addEventListener('storage', onStorageEvent); 
 
    </script> 
 
</body> 
 

 
</html>

Notwendigkeit für den Hinweis auf die Web-Server

Quelle

2016-08-15 20:57:25 Dekel

Leider konnte das Problem dadurch nicht behoben werden. Der 'false' useCapture-Parameter wurde zur Abwärtskompatibilität mit älteren Browsern hinzugefügt, da dies ein einmal erforderliches Feld war. Durch das Entfernen werden die Ergebnisse nicht geändert. Dieses unveränderte Ergebnis wird etwas erwartet seit - [nach MDN] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) - "falls nicht angegeben, verwendet useCapture standardmäßig false." – freak

Welchen Browser benutzen Sie? – Dekel

Chrome 52.0.x und IE 11.0.9600.x auf Win7. Haben Sie Arbeitsergebnisse anderswo generiert? – freak

Lokales Speicherereignis kann nicht in Tabs angezeigt werden

Antwort

Verwandte Themen