Как я могу следить за изменениями в localStorage в Angular2?

Question

Я пытался выяснить, как заставить меню появляться и исчезать, основываясь на том, что вы вошли в предыдущий пост. Но я думаю, что лучший и, возможно, более простой вопрос: как я могу следить за изменениями в localstorage?

Я использую токены json для локального хранилища для моей аутентификации, мне бы очень хотелось наблюдать за изменением localStorage, а затем повторно обновить мое представление о новой информации.

Я установил мой LocalStorage с этим

localStorage.setItem('jwt', my_token); 

вещи, которые я хотел бы сделать, это проверить, если у меня есть знак, если я не ничего не происходит, но когда происходит смена срабатывала событие. Мне особенно понравилось бы, если бы я мог наблюдать только за определенным названным событием, например localStorage.getItem ('jwt').

Спасибо!

EDIT:

Гюнтер указал мне в правильном направлении, но только в случае, если кто-то еще довольно смущен, что, вот plunker показывает вам, как это сделать. http://plnkr.co/edit/TiUasGdutCsll1nI6USC?p=preview

Answer 1

Главное - использовать window.addEventListener("storage",. Хотя библиотека, вероятно, делает это «правильным» способом для углового, вот «легкая» версия, которую я собрал вместе, используя .bind(this) вместо того, чтобы обманывать внутренности углового.

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

Используйте сервис и пользуйтесь LocalStorage только через эту службу.
Затем служба может предоставлять наблюдаемые данные, которые излучают события при внесении изменений, и вы можете подписаться на эти наблюдаемые, чтобы получить уведомление.

Answer 3

Я знаю, что это сообщение немного устарело, но есть библиотеки, которые могут это сделать для вас. Например, h5webstorage позволит вам рассматривать localStorage и sessionStorage как обычные объекты, а синхронизация обрабатывается автоматически. Даже изменения в хранилище будут напрямую возвращаться в ваше приложение.