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

Question

我正在尝试实现我所希望的一个简单的“查看会话存储中的键并在它更改时更新它”的场景，但 Observables 真的让我失望了。

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

并且 message$ 绑定到 HTML，非常简单：

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

在Observable将输出文本到HTML是否已存在存储在“消息”的价值，但如果有关于初始化没有消息，然后将其添加，或消息值确实存在，更新，没有任何反应。我显然做错了什么，我很感激有知识的人的洞察力Observables。

Answer 1

我认为您正在寻找的是StorageEvent

您可以使用fromEvent从此事件创建可观察对象，如下所示：

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

请注意，我添加了过滤器来专门查找 sessionStorage 的更新，并指定了键 === "message"，但您也可以使用 localStorage 和您想要的任何键

此外，正如Damian C指出的那样，如果您打算仅在模板中使用它，则无需订阅此 observable。

已编辑： 上述解决方案仅在您打开多个选项卡并希望同步对存储的更改时才有效。检查这个答案

我认为您必须更改将值设置为 sessionStorage 的地方。我的建议是使用您自己的 StorageService（我的示例），您将在其中将值设置为 storage 并保留一个可观察的对象，该可观察对象应该在您设置键/值时发出。

我在stackblitz上做了一个例子

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