मैं कोणीय 2 में स्थानीय स्टोरेज में परिवर्तनों के लिए कैसे देख सकता हूं?

Question

मैं यह पता लगाने की कोशिश कर रहा था कि पिछले पोस्ट में लॉग इन होने के आधार पर मेनू कैसे दिखें और गायब हो जाएं। लेकिन मुझे लगता है कि एक बेहतर और संभवतः आसान सवाल होगा, मैं स्थानीय स्टोरेज में बदलावों के लिए कैसे देख सकता हूं?

मैं अपने प्रमाणीकरण के लिए स्थानीय स्टोरेज में जेसन वेब टोकन का उपयोग कर रहा हूं, मुझे स्थानीय स्टोरेज में बदलाव की तलाश करना अच्छा लगेगा और फिर नई जानकारी पर मेरा दृश्य दोबारा अपडेट करना होगा।

मैं चीजों को मैं अगर मैं एक टोकन राशि की जांच कर रहा है करना चाहते हैं इस

localStorage.setItem('jwt', my_token); 

के साथ मेरी localStorage निर्धारित करते हैं, अगर मैं नहीं कुछ नहीं होता है, लेकिन जब वहाँ एक परिवर्तन आग एक घटना है। मैं विशेष रूप से इसे पसंद करूंगा अगर मैं केवल एक निश्चित नामित ईवेंट की तलाश कर सकता हूं जैसे localStorage.getItem ('jwt')।

धन्यवाद!

संपादित करें:

Gunter सही दिशा में मुझे इशारा किया लेकिन सिर्फ मामले में किसी को अब भी काफी है कि से उलझन में है, यहाँ आप दिखा कैसे यह करने के लिए एक 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

सेवा का उपयोग करें और केवल हर जगह से इस सेवा के माध्यम से स्थानीय स्टोरेज तक पहुंचें।
सेवा तब वे अवलोकन प्रदान कर सकती है जो परिवर्तनों पर घटनाओं को उत्सर्जित करती हैं और आप अधिसूचित होने के लिए इन अवलोकनों की सदस्यता ले सकते हैं।

Answer 3

मुझे पता है कि यह पोस्ट थोड़ा पुराना है लेकिन पुस्तकालय हैं जो आपके लिए यह कर सकते हैं। उदाहरण के लिए h5webstorage आपको स्थानीय स्टोरेज और सत्र स्टोरेज को नियमित ऑब्जेक्ट्स और सिंक्रनाइज़ेशन जैसे स्वचालित रूप से संभाला जाएगा। स्टोरेज में भी बदलाव सीधे आपके ऐप में वापस आ जाएंगे।