40

以前の投稿でログインしたことに基づいて、メニューを表示および非表示にする方法を見つけようとしていました。しかし、ローカルストレージへの変更を監視するにはどうすればよいでしょうか。

認証のためにローカル ストレージで json Web トークンを使用しています。localStorage への変更を監視してから、新しい情報に関するビューを再更新したいと考えています。

これでlocalStorageを設定しました

localStorage.setItem('jwt', my_token);

私がやりたいことは、トークンがあるかどうかを確認することです。何も起こらない場合は、変更が発生したときにイベントを発生させます。localStorage.getItem('jwt') のような特定の名前付きイベントのみを監視できれば、特に気に入っています。

ありがとう！

編集：

Gunter は私に正しい方向性を教えてくれましたが、それでもまだかなり混乱している人がいる場合に備えて、その方法を示すプランカーを次に示します。 http://plnkr.co/edit/TiUasGdutCsll1nI6USC?p=preview

4

4 に答える 4

51

重要なことは、使用することwindow.addEventListener("storage", です。ライブラリはおそらくangularの「正しい」方法でそれを行いますが、ここでは、angularの内部をいじる代わりに.bind(this)を使用してまとめた「軽量」バージョンを示します。

    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 にアクセスします。
その後、サービスは変更時にイベントを発行するオブザーバブルを提供でき、これらのオブザーバブルをサブスクライブして通知を受け取ることができます。

于 2016-02-14T19:55:52.693 に答える