Wie kann ich Änderungen in LocalStorage in Angular2 überwachen?

Question

Ich habe versucht herauszufinden, wie man ein Menü erscheinen und verschwinden lässt, wenn man in einem früheren Post angemeldet ist. Aber ich denke, eine bessere und möglicherweise einfachere Frage wäre, wie kann ich auf Veränderungen im lokalen Speicher achten?

Ich benutze Json Web-Token im lokalen Speicher für meine Authentifizierung, würde ich gerne auf eine Änderung der localStorage zu sehen und dann meine Sicht auf neue Informationen neu zu aktualisieren.

ich meine local mit diesem

localStorage.setItem('jwt', my_token); 

Die Dinge, die ich wird überprüfen tun möchte, wenn ich ein Token haben, passiert, wenn ich nicht nichts tun, aber wenn es eine Änderung Feuer ein Ereignis. Ich würde es besonders mögen, wenn ich nur nach einem bestimmten benannten Ereignis wie localStorage.getItem ('jwt') schauen könnte.

Danke!

EDIT:

Gunter mich in die richtige Richtung, aber nur für den Fall ist jemand noch ziemlich durch das verwirrt, hier ist ein Plunker zeigt Ihnen, wie es geht. http://plnkr.co/edit/TiUasGdutCsll1nI6USC?p=preview

Answer 1

Der Schlüssel ist, window.addEventListener("storage", zu verwenden. Während die Bibliothek es wahrscheinlich den "richtigen" Weg für eckig macht, ist hier eine "leichte" Version, die ich zusammensetze, indem ich .bind(this) anstelle von in eckigen Interna mucking.

import { Injectable, OnDestroy } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 
import 'rxjs/add/operator/share' 

@Injectable() 
export class StorageService implements OnDestroy { 
    private onSubject = new Subject<{ key: string, value: any }>(); 
    public changes = this.onSubject.asObservable().share(); 

    constructor() { 
    this.start(); 
    } 

    ngOnDestroy() { 
    this.stop(); 
    } 

    public getStorage() { 
    let s = []; 
    for (let i = 0; i < localStorage.length; i++) { 
     s.push({ 
     key: localStorage.key(i), 
     value: JSON.parse(localStorage.getItem(localStorage.key(i))) 
     }); 
    } 
    return s; 
    } 

    public store(key: string, data: any): void { 
    localStorage.setItem(key, JSON.stringify(data)); 
    // the local application doesn't seem to catch changes to localStorage... 
    this.onSubject.next({ key: key, value: data}) 
    } 

    public clear(key) { 
    localStorage.removeItem(key); 
    // the local application doesn't seem to catch changes to localStorage... 
    this.onSubject.next({ key: key, value: null }); 
    } 


    private start(): void { 
    window.addEventListener("storage", this.storageEventListener.bind(this)); 
    } 

    private storageEventListener(event: StorageEvent) { 
    if (event.storageArea == localStorage) { 
     let v; 
     try { v = JSON.parse(event.newValue); } 
     catch (e) { v = event.newValue; } 
     this.onSubject.next({ key: event.key, value: v }); 
    } 
    } 

    private stop(): void { 
    window.removeEventListener("storage", this.storageEventListener.bind(this)); 
    this.onSubject.complete(); 
    } 
} 

Answer 2

Verwenden Sie einen Dienst und greifen Sie über diesen Dienst nur von überall auf LocalStorage zu.
Der Dienst kann dann Observables bereitstellen, die Ereignisse bei Änderungen ausgeben, und Sie können diese Observables abonnieren, um benachrichtigt zu werden.

Answer 3

Ich weiß, dass dieser Beitrag etwas alt ist, aber es gibt Bibliotheken, die das für Sie tun können. Zum Beispiel die h5webstorage können Sie behandeln LocalStorage und SessionStorage wie reguläre Objekte und Synchronisation wird automatisch behandelt. Auch Änderungen am Speicher werden direkt in Ihre App zurückgeleitet.