如何在 Angular 4 中查找 localStorage 的变化？答案

【问题标题】：How to look for changes in localStorage in Angular 4?如何在 Angular 4 中查找 localStorage 的变化？
【发布时间】：2018-01-17 06:12:53
【问题描述】：

我正在尝试使用 Angular 4 访问 localStorage 并使用 Observables 查找 localStorage 值的变化：

这是我一直在处理的代码：

userNameObservable: Observable<string>;
userName: String = '';
ngOnInit() {
    this.userNameObservable = Observable.create(
      Observable.of(localStorage.getItem('profileName'))
    );
    this.userNameObservable.subscribe((name: String) => {
      this.userName = name;
    })
}

但我收到错误ERROR TypeError: this._subscribe is not a function。我该如何解决这个问题？有没有更好更有效的方法来查找 localStorage 的变化？

【问题讨论】：

你可以在'storage'上监听事件监听器答案stackoverflow.com/a/4689033/5562006
@ArsenKarapetjan 存储事件仅被触发一次，以后无法检测到更改

标签： javascript angular local-storage observable

【解决方案1】：

您可以使用 TypeScript getter 来实现这一点。

get userName() {
   return localStorage.getItem('profileName');
}

【讨论】：

这似乎可行，但无法检测到是否对 localStorage 值进行了任何更改
如果你手动更改localStorage的值，当然不会检测到变化，但是本地存储上的变化必须通过程序来完成，在这种情况下它会检测到。

【解决方案2】：

找到以下解决方案。

在您的 ngOnInit 或 AfterViewInit 中添加以下代码。

if (window.addEventListener) {
    window.addEventListener("storage", this._listener, false);
}

并在类中声明以下函数。

private _listener = () => {
   // your logic here
}

当你完成监听或 ngOnDestroy 时也移除监听器

window.removeEventListener("storage", this._listener, false);

干杯。

【讨论】：

【解决方案3】：

Observables 不起作用，因为local storage 会受到多种影响。

您可以将host listener 附加到local storage，因为Storage interface 在它影响的全局对象上发出storage 事件。

类似的东西

import { KeyboardEvent } from '@angular/core';

@Component({
  ...
  host: {
    '(document:storage)': 'onStorageChange($event)'
  }
})
export class MyComponent {
  onStorageChange(ev:KeyboardEvent) {
    // do something meaningful with it
    console.log(`Localstorage change/updated!`);
  }
}

【讨论】：

onStorageChange() 函数甚至没有在上面的脚本中触发

【解决方案4】：

我们不能使用 Subject 来监视本地存储，但我们可以利用 Subject 来实现目标。

为此，我们必须创建一个主题，

private storageSub = new Subject<string>();

同时创建一个 observable，

public storageSubObs: Observable<any>

为 Subject 分配 observable，

ngOnInit(): void {
      this.storageSubObs = this.storageSub.asObservable();
 }

现在我们必须在本地存储更改时触发，因为我们将在本地存储更新/更改后立即添加代码。

  localStorage.setItem('item', yourItemData);
  this.storageSub.next('changed');

现在我们想知道我们要做的更改状态，

this.storageSubObs..subscribe((data:string) => {
   // invokes when the localstorage is changed. 
 })

感谢和问候

【讨论】：

【解决方案5】：

如果你想从本地存储中检测事件

window.addEventListener('storage', function(e) {

 console.log('event from localstorage')
 // any change/trigger in local storage will be catch here

});

//例如你清除本地存储

window.addEventListener('storage', function(e) {

  if (localStorage.length === 0) {
  console.log('localstorage empty')
  }

});

【讨论】：