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

我试图实现我所希望的一个简单的“查看会话存储中的密钥并在它发生变化时更新它”的场景，但 Observables 确实让我困惑。

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

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

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

The Observable将输出文本到HTML如果“message”中已经存储了值，但如果 init 上没有消息，然后将其添加，或者消息值确实存在并已更新，则不会发生任何情况。我显然做错了什么，我会很感激有知识的人的见解Observables.

我认为你正在寻找的是存储事件 https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent

您可以使用此事件创建您的可观察对象来自事件 https://www.learnrxjs.io/learn-rxjs/operators/creation/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指出 https://stackoverflow.com/a/60235322/7658286，如果您打算仅在模板中使用它，则无需订阅此可观察值。

EDITED: 上述解决方案仅在您打开多个选项卡并希望将更改同步到存储时才有效。查看这个答案 https://stackoverflow.com/a/6846158/7658286

我认为你必须更改将值设置为 sessionStorage 的位置。我的建议是使用你自己的 StorageService (我的例子 https://stackblitz.com/edit/angular-3szmzd?file=src%2Fservices%2Fstorage.service.ts），您将在其中将值设置为存储并保留可观察值，该可观察值应在您设置键/值时发出。

我做了一个Stackblitz 上的示例 https://stackblitz.com/edit/angular-3szmzd

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