Обнаружение изменений в локальном хранилище и отображение на странице без перезагрузки - PullRequest
Новая
       36

Обнаружение изменений в локальном хранилище и отображение на странице без перезагрузки

0 голосов
/ 17 апреля 2019

У меня проблема с угловым, ионным 4 localstorage. Когда я сохраняю данные о localalstorage с одной страницы и хочу показать данные на другой странице, мне нужно перезагрузить страницу, чтобы она заработала. Я подумал о проверкедля изменений локального хранилища на странице я хочу показать данные. Знаете ли вы, как я могу обнаружить изменения в локальном хранилище в угловых 7, ионных 4?

Ответы [ 4 ]

1 голос
/ 17 апреля 2019

Чтобы проверить, изменилось ли значение в storage, вы можете добавить listener к event of the storage следующим образом: 

document.addEventListener('storage', (e) => {  
    if(e.key === 'theyKeyYouWant') {
       // Do whatever you want
    }
});
1 голос
/ 17 апреля 2019

Я думаю, вы должны использовать поток 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');
  }
0 голосов
/ 17 апреля 2019 
localStorage.setItem(key, value);
localStorage.getItem(key);

Для удаления вы можете использовать 

 ngOnDestroy() {
    localStorage.removeItem('key');
  }
0 голосов
/ 17 апреля 2019

У вас может быть служба, которая позаботится об установке и получении значений в / из 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

...