行为主题和本地存储

Question

我仍在试图理解rxjs和observables和BehaviorSubject。我想做的是，将BehaviorSubject和LocalStorage结合起来，这样当一个特定的LocalStorage变量发生变化时，所有组件都会得到通知。

例如，考虑以下场景。

>

有两个组件Component1和Component2。

这两个组件都在Local存储中查找一个名为Component1和Component2的变量，它们包含一种颜色并显示该颜色的正方形。

Component1 需要订阅 LocalStorage 中的 “Component1Color” 键，Component2 需要订阅 LocalStorage 中的 “Component2Color”。

实现此目的的一种方法是使用一个维护LocalStorage状态的BehaviorSubject，并在任何变量发生更改时，将此消息广播给订阅了Behavior Subject的所有组件。

这种方法的问题是，当Component2Color被更新时，component1也会收到通知，而不会对此采取任何措施。

更好的是，Component1仅在Component1Color更新时得到通知，Component2仅在Component2Color更新时得到通知。有没有一种方法可以用一个单一的行为主体来做到这一点？

Answer 1

您可以通过< code>StorageEvent监听存储事件

const storage = Rx.Observable.fromEvent(window, 'storage').groupBy(ev => ev.key);

然后，您可以通过以下操作访问每个流：

let component1Stream = storage.filter(x => x.key === 'Component1Color').merge();

//Or using flatMap
let component2Stream = storage.flatMap(x =>
  x.key === 'Component2Color' ? x : Rx.Observable.empty()
);

编辑

正如评论中指出的，存储事件仅对跨页更新有用，如果您在同一页上，它不会更新。幸运的是，解决方案几乎保持不变，您只需要为local存储对象提供一个装饰器对象，以便它可以发出事件。

class RxLocalStorage {
  private _subject: Rx.Subject<any>;
  private _updates: Observable<any>;
  constructor() {
    this._subject = new Rx.Subject();
    this._updates = this._subject.groupBy(ev => ev.key)
      .share();
  }
  getItem(key) { return this._updates.filter(x => x.key === key).merge(); }
  setItem(key, newValue) {
    const oldValue = localStorage.getItem(key);
    const event = {key, newValue, oldValue};
    localStorage.setItem(newValue);
    this._subject.next(event);
  }
}


let myLocalStorage = new RxLocalStorage();
myLocalStorage.getItem('Component1Color')
  .subscribe(x => console.log('Component1 Color changed'));

myLocalStorage.setItem('Component1Color', 'blue');
//-> Component1 Color changed

请注意，以上假设在开始进行更改之前已完成所有订阅。