0
643
Visualizações¿Cómo puedo ver cambios en localStorage en Angular2?
Estaba tratando de averiguar cómo hacer que un menú apareciera y desapareciera en función de haber iniciado sesión en una publicación anterior. Pero creo que una pregunta mejor y posiblemente más fácil sería, ¿cómo puedo observar los cambios en el almacenamiento local?
Estoy usando tokens web json en el almacenamiento local para mi autenticación, me encantaría ver un cambio en localStorage y luego volver a actualizar mi vista con nueva información.
Configuré mi localStorage con esto
localStorage.setItem('jwt', my_token);Lo que me gustaría hacer es verificar si tengo un token, si no, no pasa nada, pero cuando hay un cambio, se activa un evento. Me gustaría especialmente si solo pudiera observar un determinado evento con nombre como localStorage.getItem('jwt').
¡Gracias!
EDITAR:
Gunter me indicó la dirección correcta, pero en caso de que alguien todavía esté bastante confundido por eso, aquí hay un plunker que le muestra cómo hacerlo. http://plnkr.co/edit/TiUasGdutCsll1nI6USC?p=preview
3 Respostas
Responde à pergunta0
La clave es usar window.addEventListener("storage", . Si bien la biblioteca probablemente lo hace de la manera "correcta" para angular, aquí hay una versión "ligera" que preparé, usando .bind(this) en lugar de perder el tiempo en los internos de angular.
import { Injectable, OnDestroy } from '@angular/core'; import { Subject } from 'rxjs/Subject'; import { share } from 'rxjs/operators'; @Injectable() export class StorageService implements OnDestroy { private onSubject = new Subject<{ key: string, value: any }>(); public changes = this.onSubject.asObservable().pipe(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)); this.onSubject.next({ key: key, value: data}) } public clear(key) { localStorage.removeItem(key); 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(); } } 
0
Use un servicio y solo acceda a LocalStorage a través de este servicio desde cualquier lugar.
Luego, el servicio puede proporcionar observables que emiten eventos sobre cambios y puede suscribirse a estos observables para recibir notificaciones.
0
Versión actualizada de https://stackoverflow.com/a/47683091/3098882 con nuevos rxjs 6.
import { Injectable, OnDestroy } from '@angular/core'; import { Subject } from "rxjs"; import { share } from 'rxjs/operators'; @Injectable() export class StorageService implements OnDestroy { private onSubject = new Subject<{ key: string, value: any }>(); public changes = this.onSubject.asObservable().pipe(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(); } }