40

我试图弄清楚如何根据上一篇文章中的登录来让菜单出现和消失。但我认为一个更好且可能更简单的问题是，我如何观察本地存储的变化？

我在本地存储中使用 json Web 令牌进行身份验证，我很想观察 localStorage 的变化，然后重新更新我对新信息的看法。

我用这个设置了我的localStorage

localStorage.setItem('jwt', my_token);

我想做的事情是检查我是否有令牌，如果我没有任何事情发生，但是当发生变化时会触发一个事件。如果我只能监视某个命名事件，例如 localStorage.getItem('jwt')，我会特别喜欢它。

谢谢！

编辑：

Gunter 为我指出了正确的方向，但以防万一有人仍然对此感到困惑，这里有一个 plunker 向您展示如何做到这一点。 http://plnkr.co/edit/TiUasGdutCsll1nI6USC?p=preview

4

4 回答 4

51

关键是用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();
      }
    }

LocalStorageTwoTabs

于 2017-12-06T20:39:38.390 回答
21

使用服务并且只能从任何地方通过该服务访问 LocalStorage。
然后，该服务可以提供在更改时发出事件的 observables，您可以订阅这些 observables 以获得通知。

于 2016-02-14T19:55:52.693 回答
12

https://stackoverflow.com/a/47683091/3098882的更新版本，带有新的 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();
    }
}
于 2019-07-15T12:03:00.837 回答
1

我知道这篇文章有点旧，但有一些图书馆可以为你做这件事。例如，h5webstorage将让您将 localStorage 和 sessionStorage 视为常规对象，并且自动处理同步。甚至直接对存储的更改也会流回您的应用程序。

于 2016-04-28T18:11:53.740 回答