我如何观察 Angular2 中 localStorage 的变化?
How can I watch for changes to localStorage in Angular2?
我试图弄清楚如何根据之前 post 中的登录情况来显示和消失菜单。但我认为一个更好、可能更简单的问题是,我如何观察 localstorage 的变化?
我在本地存储中使用 json 网络令牌进行身份验证,我很乐意观察 localStorage 的变化,然后重新更新我对新信息的看法。
我用这个设置我的 localStorage
localStorage.setItem('jwt', my_token);
我想做的事情是检查我是否有令牌,如果没有,什么都不会发生,但是当有变化时触发一个事件。如果我只能观看某个命名事件,如 localStorage.getItem('jwt').
,我会特别喜欢它
谢谢!
编辑:
Gunter 为我指出了正确的方向,但以防万一有人对此感到困惑,这里有一个 plunker 向您展示了如何去做。
http://plnkr.co/edit/TiUasGdutCsll1nI6USC?p=preview
使用一项服务,并且只能通过该服务从任何地方访问 LocalStorage。
然后,该服务可以提供可观察值,在更改时发出事件,您可以订阅这些可观察值以获得通知。
我知道这个 post 有点旧,但是有些图书馆可以为您做这件事。例如 h5webstorage 将让您像对待常规对象一样对待 localStorage 和 sessionStorage,并且自动处理同步。即使直接更改存储也会回流到您的应用中。
关键是要用window.addEventListener("storage",
。虽然该库可能以 angular 的“正确”方式执行此操作,但这是我放在一起的“轻量级”版本,使用 .bind(this) 而不是在 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();
}
}
的更新版本包含新的 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();
}
}
我试图弄清楚如何根据之前 post 中的登录情况来显示和消失菜单。但我认为一个更好、可能更简单的问题是,我如何观察 localstorage 的变化?
我在本地存储中使用 json 网络令牌进行身份验证,我很乐意观察 localStorage 的变化,然后重新更新我对新信息的看法。
我用这个设置我的 localStorage
localStorage.setItem('jwt', my_token);
我想做的事情是检查我是否有令牌,如果没有,什么都不会发生,但是当有变化时触发一个事件。如果我只能观看某个命名事件,如 localStorage.getItem('jwt').
,我会特别喜欢它谢谢!
编辑:
Gunter 为我指出了正确的方向,但以防万一有人对此感到困惑,这里有一个 plunker 向您展示了如何去做。 http://plnkr.co/edit/TiUasGdutCsll1nI6USC?p=preview
使用一项服务,并且只能通过该服务从任何地方访问 LocalStorage。
然后,该服务可以提供可观察值,在更改时发出事件,您可以订阅这些可观察值以获得通知。
我知道这个 post 有点旧,但是有些图书馆可以为您做这件事。例如 h5webstorage 将让您像对待常规对象一样对待 localStorage 和 sessionStorage,并且自动处理同步。即使直接更改存储也会回流到您的应用中。
关键是要用window.addEventListener("storage",
。虽然该库可能以 angular 的“正确”方式执行此操作,但这是我放在一起的“轻量级”版本,使用 .bind(this) 而不是在 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();
}
}
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();
}
}