Come posso vedere le modifiche a localStorage in Angular2?

Question

Stavo cercando di capire come ottenere un menu per apparire e scomparire in base all'accesso in un post precedente. Ma penso che una domanda migliore e probabilmente più semplice sarebbe, come posso osservare le modifiche alla localistage?

Sto utilizzando i token web json nella memoria locale per la mia autenticazione, mi piacerebbe vedere una modifica a localStorage e quindi aggiornare la mia vista su nuove informazioni.

ho impostato la mia localStorage con questo

localStorage.setItem('jwt', my_token); 

Le cose che vorrei fare è controllare se ho un motivo, se non lo faccio non succede nulla, ma quando c'è un cambiamento di fuoco di un evento. Mi piacerebbe soprattutto se potessi guardare solo per un certo evento denominato come localStorage.getItem ('jwt').

Grazie!

EDIT:

Gunter mi ha segnalato nella giusta direzione, ma solo nel caso in cui qualcuno è ancora abbastanza confuso da questo, ecco un plunker che vi mostra come fare. http://plnkr.co/edit/TiUasGdutCsll1nI6USC?p=preview

Answer 1

L'elemento chiave è utilizzare window.addEventListener("storage",. Mentre la libreria probabilmente fa il modo "giusto" per angolare, ecco una versione "leggera" che ho messo insieme, usando .bind(this) invece di masticare circa negli interni di angular.

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

Utilizzare un servizio e accedere a LocalStorage tramite questo servizio da qualsiasi luogo.
Il servizio può quindi fornire osservabili che emettono eventi sulle modifiche ed è possibile sottoscrivere questi osservabili per ottenere una notifica.

Answer 3

So che questo post è leggermente vecchio ma ci sono librerie che possono farlo per voi. Ad esempio il h5webstorage ti permetterà di trattare localStorage e sessionStorage come oggetti regolari e la sincronizzazione viene gestita automaticamente. Anche le modifiche allo storage direttamente torneranno nella tua app.