Question

我有一个关于角度离子4本地存储的问题。当我从一个页面将数据保存在本地存储上，并且想要将数据显示到另一页面上时，我需要重新加载页面以使其正常工作。我考虑过检查我要显示数据的页面中的本地存储更改。您知道如何检测角度7，离子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

您可以拥有一项服务，该服务负责在属性设置器和获取器中设置和从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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="imageLink3" href="">
  <img id="charityimgSizer" src="" class="rewardImgSize alignright notopmargin pulse animated" alt="hexagon" title="hexagon" data-animate="pulse">
</a>

要删除，您可以使用

android:layout_height="wrap_content"

检测本地存储更改并在不重新加载的情况下显示在页面上

4 个答案: