Angular中使用Observable获取LocalStorage值失效问题

问题根源 #

• 你用of()创建的是冷Observable，这类Observable只有在被订阅（subscribe()）后才会触发内部的操作符逻辑，当前代码仅定义了Observable但未订阅，所以map里的代码不会执行。
• 另外，of(JSON.parse(localStorage.getItem('isManager')))只会在创建时读取一次LocalStorage的值，无法实现「持续读取值」的需求——后续LocalStorage的变化不会触发它重新取值。

分步解决 #

1. 先让现有代码生效（仅读取一次） #

给Observable添加订阅，触发逻辑执行：

of(JSON.parse(localStorage.getItem('isManager'))).pipe(
  takeWhile(() => this.alive),
  map((isManager: boolean) => {
    console.log('isManager', isManager);
    this.doNavigation(isManager);
  })
).subscribe(); // 必须添加订阅才会执行

2. 实现持续监听LocalStorage变化的需求 #

要实时响应LocalStorage的变化，需要结合浏览器的storage事件（同源页面修改LocalStorage时触发），同时获取初始值：

import { fromEvent, of, merge } from 'rxjs';
import { map, takeWhile } from 'rxjs/operators';

// 监听storage事件，仅关注isManager字段的变化
const storageChange$ = fromEvent(window, 'storage').pipe(
  map((event: StorageEvent) => {
    return event.key === 'isManager' 
      ? JSON.parse(event.newValue) 
      : JSON.parse(localStorage.getItem('isManager'));
  })
);

// 合并初始值和变化事件，保证页面加载时拿到初始值，后续变化也能响应
merge(
  of(JSON.parse(localStorage.getItem('isManager'))), // 初始值
  storageChange$
).pipe(
  takeWhile(() => this.alive),
  map((isManager: boolean) => {
    console.log('isManager', isManager);
    this.doNavigation(isManager);
  })
).subscribe();

说明：如果是当前页面修改LocalStorage，storage事件不会触发，此时可以在修改LocalStorage的代码处手动发送值到Observable，或者额外监听自定义事件。

内容的提问来源于stack exchange，提问作者robi