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

#angular #local-storage #ionic4

#angular #локальное хранилище #ionic4

Вопрос:

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

Ответ №1:

Я думаю, вам следует использовать rxjs stream для достижения этой цели.

    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');
  }

1. я получаю эту ошибку: аргумент типа ‘»изменен»‘ не может быть присвоен параметру типа ‘boolean’ отсюда:this.storageSub.next(‘изменен’);

2. Ах, извините, конечно, это приведет к ошибке. Если тип логический, вы должны передать значение true false. Это зависит от вас, как вы сочтете это более подходящим. Я думаю, вам следует просто перейти на new Subject<string>();

3. Это работает! я сделал, как вы сказали, в моем DataService, и я вызываю watchstorage на своей домашней странице. В home я получаю значения из хранилища и помещаю их в диаграмму следующим образом :: this.storage.get(this.Uid).then((val) => {…..} должен ли я поместить это внутрь, чтобы это работало?? :: это.DataService. watchStorage().subscribe((данные: строка) => { if(data==’изменено’){ this.storage.get(this.Uid).then((значение) => {…..} } }); или я бы перезагрузил окно, если утверждение if истинно?

4. Вам не нужно перезагружать. Вы на правильном пути. (this.DataService. watchStorage().subscribe((данные: строка) => …) Подписывайтесь, смотрите поток и действуйте на основе «данных». Делайте что угодно, если утверждение истинно. Пожалуйста, не забудьте проголосовать или отметить это как свой ответ :)) Наслаждайтесь потоком 🙂

5. Ofc . Большое спасибо, приятель!!

Ответ №2:

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

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

Ответ №3:

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

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

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

Ответ №4:

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