Polymer - JavaScript - Datenbindung: Echtzeit-Update?

Question

Ich habe zwei Seiten: my-view1 und my-view2. Auf my-view1 habe ich zwei Schaltflächen, die Daten aus LocalStorage hinzufügen und entfernen. Auf my-view2 habe ich zwei einfache Divs, die den Gesamtwert LESEN (anzeigen) und den Gesamtwert in den letzten 6 Monaten anzeigen.

Auf der zweiten Seite wird der Wert jedoch nicht aktualisiert, wenn die Seite nicht aktualisiert wird. Ich möchte, dass die Werte von my-view2 automatisch aktualisiert werden, wenn die Seite geladen wird (angezeigt, auch wenn zwischengespeichert).

Hier ist ein PLNKR mit My-View2, so dass Sie understrand können, was ich versuche zu tun.

https://plnkr.co/edit/ul4T2mduxjElCN4rUUKd?p=info

Wie kann ich das tun?

Answer 1

können Sie hören auf die storage Ereignis auszulösen und einige Stütze in my-view2 zu aktualisieren, wenn Sie local aktualisieren:

<my-view-2 id="myView2"></my-view-2> 
<script> 
    window.onstorage = function(e) { 
    if (e.key !== 'someKeyYouWant') return; 
    document.getElementById('myView2').set('someProp', { 
     oldValue: e.oldValue, 
     newValue: e.newValue 
    }); 
    }; 
</script> 

EDIT (working plunk): Aufgrund eines Verhaltens here das Speicher Ereignis beschrieben wird nicht Ursprung der Änderung auf dem Fenster ausgelöst, so dass Sie Ihre eigenen Speicher Ereignis auszulösen haben, betrachten die Methode unter:

saveToLs(e) { 
    e.preventDefault(); 
    const newName = this.get('dogName'); 
    const ls = window.localStorage; 
    const synthEvent = new StorageEvent('storage'); 
    const eventConfig = [ 
    'storage', 
    true, 
    true, 
    'myDog', 
    ls.getItem('myDog'), 
    newName 
    ]; 

    synthEvent.initStorageEvent(...eventConfig); 

    setTimeout((() => { // ensure async queue 
    ls.setItem('myDog', newName); 
    this.dispatchEvent(synthEvent); 
    }).bind(this), 0); 
} 

... und auf der Listening-Seite:

Bitte beachten Sie die if bedingte Handhabung mögliche doppelte Updates mit dem gleichen Wert. Hier

ist ein working plunk für Sie mit