检测本地存储变化并在页面上显示而无需重新加载

Question

我有一个问题 angular，ionic 4 localstorage.When 我将数据从一个页面保存到 localstorage，并想将数据显示到另一个页面，我需要将页面重新加载到做到这一点 work.I 考虑检查我想显示的页面中的本地存储更改 data.Do 你知道我如何检测 angular 7,ionic 4 中本地存储的更改吗？

Answer 1

我认为你应该使用 rxjs 流来完成这个。

   private storageSub= new Subject<string>();
  ...

  watchStorage(): Observable<any> {
    return this.storageSub.asObservable();
  }

  setItem(key: string, data: any) {
    localStorage.setItem(key, data);
    this.storageSub.next('added');
  }

  removeItem(key) {
    localStorage.removeItem(key);
    this.storageSub.next('removed');
  }

Answer 2

要检查 storage 中的值是否已更改，您可以将 listener 添加到 event of the storage，如下所示：

document.addEventListener('storage', (e) => {  
    if(e.key === 'theyKeyYouWant') {
       // Do whatever you want
    }
});

Answer 3

您可以在属性 setter 和 getter 中设置和检索值 to/from localStorage 的服务。

模板绑定到属性后，您的相应组件将根据更改检测进行更新。

例如，这是您要在 localStorage 中设置的属性服务。

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

@Injectable()
export class SetStorageService {

  private _localItem: string = '';
  constructor() { }

  set localItem(value: string) {
    this._localItem = value;
    localStorage.setItem('localItem', value);
  }

  get localItem() {
    return this._localItem = localStorage.getItem('localItem')
  }

}

你的组件如下：

export class AppComponent  {
  name = 'Angular';
  private _item: string = ""

  constructor(private _storageService: SetStorageService) {}

  set item(value) {
    this._item = value;
    this._storageService.localItem = value;
  }

  get item() {
    return this._item = this._storageService.localItem;
  }

  addValue() {
    this.item = "New Value"
  }
}

您的视图将绑定到最终从 localStorage（通过服务）获取数据的属性。

<p>
  Item in App component - <b>{{item}}</b> 
</p>

在此处查看示例：

https://stackblitz.com/edit/angular-pgdz8e?file=src%2Fapp%2Fapp.component.ts

Answer 4

localStorage.setItem(key, value);
localStorage.getItem(key);

要删除您可以使用

 ngOnDestroy() {
    localStorage.removeItem('key');
  }

检测本地存储变化并在页面上显示而无需重新加载

Detect local storage changes and show on page without reloading

local-storage

angular

ionic4