使用 Angular Observable 订阅会话存储密钥

Question

I'm trying to accomplish what I had hoped would be a simple "look at the key in Session Storage and update it when it changes" scenario, but Observables really trip me up.

message$ = new Observable(observer => {
    observer.next(window.sessionStorage.getItem('message'));
});
    
ngOnInit() {
    this.message$.subscribe();
}

And the message$ is bound to the HTML, pretty straightforward:

<p id="message">{{message$ | async}}</p>

The Observable will output the text to the HTML if there's already value stored in 'message' but if there's no message on init and then it gets added, or the message value does exist and is updated, nothing happens. I'm obviously doing something wrong, and I would appreciate the insight of someone knowledgeable with Observables .

Answer 1

I think what you're looking for is a StorageEvent

You can create your observable from this event using fromEvent , like this:

const message$ = fromEvent<StorageEvent>(window, "storage").pipe(
  filter(event => event.storageArea === sessionStorage),
  filter(event => event.key === "message"),
  map(event => event.newValue)
);

Notice that I added filters to specifically look for updates of sessionStorage and I specified the key === "message", but you can also use localStorage and any key you want

Also, as Damian C pointed out , you don't need to subscribe to this observable if you're planning to only use it in template.

EDITED: solution above only working when you have multiple tabs opened and want to synchronize changes to storage. Check this answer

I think you have to change a place where you set your value to sessionStorage. My suggestion is to use your own StorageService ( my example ) where you will set your value to storage and keep an observable, which should emit when you are setting key/value.

I did an example on stackblitz

https://stackblitz.com/edit/angular-3szmzd

Answer 2

This thread is a bit old, but I just had the same problem.

As indicated by @quake, the storageEvent is not raised for changes within the same window.

To achieve the desired "settings interception" you have to patch the storage functions of the localSorage or sessionStorage. For example:

   // somewhere in a Class...

  private setStorageItemFunc: (key: string, value: string) => void;
  private getStorageItemFunc: (key: string) => string;
  private subject$: Subject<string>;

  applySettingsInterception() {
    // define a Subject
    this.subject$ = new Subject();

    // just for demonstation purposes. Don't subscribe to the subject, use async pipe instead
    this.subject$.subscribe(e => {
      console.log('value changed', e);
    });

    // save original functions
    this.setStorageItemFunc = window.localStorage.setItem;
    this.getStorageItemFunc = window.localStorage.getItem;

    // set storage functions to the newly created interceptor functions
    // bind to this to get access to the current object and it's values in interceptor function
    window.localStorage.setItem = this.setStorageItem.bind(this);
    window.localStorage.getItem = this.getStorageItem.bind(this);
  }

  private setStorageItem(key: string, value: string): void {
    console.log('setStorageItem', key, value);

    this.subject$.next(`${key}: ${value}`);

    this.setStorageItemFunc.call(localStorage, key, value);
  }

  private getStorageItem(key: string): string {
    const value = this.getStorageItemFunc.call(localStorage, key);

    console.log('getStorageItem', key, value);

    return value;
  }

As you can see, within the intercepted functions, you can call the next() function of an Subject as mentioned by @damian-c.

Answer 3

Since you are using the async pipe, you don't need to subscribe in your component, you can take that out. AsyncPipe will handle the subscribe / unsubscribe behind the scenes.

Try using a subject instead.

// This is what will help you broadcast your message and push updates to subscribers.
message$ = new Subject();

// Anytime the "message" changes, you'll want to call this.
updateTheSubject() {
    this.message$.next(window.sessionStorage.getItem('message'));
}

Your html template can remain unchanged.

https://rxjs-dev.firebaseapp.com/guide/subject

https://angular.io/api/common/AsyncPipe