1

我有一个 Angular 8+ 应用程序，我正在尝试使用本地存储和会话存储。监听 sessionstorage 或 localstorage 的变化。由于它的角度我正在使用事件管理器类：

constructor( private elementRef: ElementRef, private eventManager: EventManager) {
    this.eventManager.addGlobalEventListener('window', 'storage', () => {
      console.log('Event listener.....');
    });
}

当 i 会话存储设置项时，上述函数不执行。它仅在我转到DevTools -> Application -> Storage然后删除该项目时执行。我在某处读到它未执行的原因是因为它无法在当前浏览器选项卡/当前窗口上执行。单击按钮时，是否有一种方法可以使事件侦听器在当前窗口或浏览器选项卡上执行？我正在使用 Chrome 浏览器。

4

1 回答 1

1

我可以想到像在localStorage对象上创建一个服务包装器并使用它EventManager来跟踪其他选项卡上的 localStorage 更改的解决方案

本地存储服务

@Injectable({
  providedIn: "root"
})
export class LocalStorageService {
  private change = new EventEmitter();

  constructor(private eventManager: EventManager) {
    this.eventManager.addGlobalEventListener(
      "window",
      "storage",
      ({ key, oldValue, newValue }) => {
        if (key) { // this mean new item has been set
          this.change.emit({
            type: localStorageAction.set,
            key,
            oldValue,
            newValue
          });
        } else { // if key is null this mean the localstorage is cleared 
          this.change.emit({
            type: localStorageAction.clear
          });
        }
      }
    );
  }

  subscribe(handler) {
    return this.change.subscribe(handler);
  }

  clear() {
    localStorage.clear();

    this.change.emit({
      type: localStorageAction.clear
    });
  }

  getItem(key: string) {
    return localStorage.getItem(key);
  }

  key(index: number) {
    return localStorage.key(index);
  }
  get length() {
    return localStorage.length;
  }

  removeItem(key: string) {
    localStorage.removeItem(key);

    this.change.emit({
      type: localStorageAction.remove,
      key
    });
  }

  setItem(key: string, value) {
    const oldValue = localStorage.getItem("key");
    localStorage.setItem(key, value);

    this.change.emit({
      type: localStorageAction.set,
      key,
      oldValue,
      newValue: value
    });
  }
}

现在通过这项服务，您可以跟踪设置、删除项目、清除等更改

演示

  • 在演示 stackblitz 中，不断更改 localStorage，说明您收到更改通知的原因。
  • 您需要使用此服务而不是localStorage对象，以便您可以在同一窗口中获得更改通知。
  • subscribe 方法返回一个订阅对象。
于 2020-08-20T13:34:21.800 回答