Angular локальное хранилище, чтобы избежать потери данных при обновлении веб-страницы

Question

Я новичок в Angular. У меня есть веб-страница, которая представляет информацию из массива, нажимая кнопки, вводя данные и т. Д. c. Мне нужно, чтобы при обновлении sh работа, выполненная на веб-странице, не стиралась. Я поднял голову и обнаружил, что должен использовать локальное хранилище. Из ответа на другой вопрос я обнаружил, что должен использовать:

Storage.prototype.setObj = function(key, obj) {
    return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getObj = function(key) {
    return JSON.parse(this.getItem(key))
}

, чтобы установить и получить информацию.

У меня все еще есть два вопроса:

1. Мне нужно сохранить его только после refre sh, есть ли способ справиться с этим непосредственно перед refre sh? Или я должен постоянно обновлять локальное хранилище при каждом изменении моих свойств и переменных?

2. Когда я должен получить данные? имеет ли смысл помещать функцию get в мой конструктор?

Answer 1

1. Хотя вы можете, вы не должны определять какие-либо методы для прототипа API браузера.
2. Поскольку localStorage является асинхронным, вы должны сообщить angular, что эти асинхронные изменения происходят, иначе ChangeDetector не будет работать должным образом.

Я использую в своих проектах этот сервис, который я создал для решения этих проблем:

import {Observable} from 'rxjs';
import {Injectable, NgZone} from '@angular/core';

@Injectable()
export class StorageService {
  private localStorage: Storage = localStorage;

  constructor(
    private _zone: NgZone
  ) {
  }

  /**
   * Set given key on browser localStorage
   * @param key
   * @param data
   * @returns {Observable<any>}
   */
  public set(key, data): Observable<any> {
    return new Observable((observer) => {
      this.localStorage.setItem(key, JSON.stringify(data));
      this._zone.run(() => {
        observer.next(true);
        observer.complete();
      });
    });
  }

  /**
   * Get given key from browser localStorage
   * @param key
   * @returns {Observable<any>}
   */
  public get(key): Observable<any> {
    return this._zone.run(() => {
      return new Observable((observer) => {
        setTimeout(() => {
          observer.next(
            JSON.parse(this.localStorage.getItem(key))
          );
          observer.complete();
        }, 0);
      });
    });
  }

  /**
   * Remove given key from browser localStorage
   * @param key
   * @returns {Observable<any>}
   */
  public remove(key): Observable<any> {
    return new Observable((observer) => {
      this.localStorage.removeItem(key);
      this._zone.run(() => {
        observer.next();
        observer.complete();
      });
    });
  }
}

Просто добавьте его своим поставщикам модулей, введите ваш контроллер / службу, которая нуждается в этом, и используйте.

Answer 2

В ответ на ваши вопросы

1. Чтобы упростить автоматическое сохранение, просто сохраните в localStorage любое изменение, но с использованием газа (например, макс. Раз в секунду). Существует событие, которое вызывается при закрытии вкладки onbeforeunload, но оно не сработает, если произойдет сбой вкладки, а количество действий, которые javascript может выполнить в этом обратном вызове, ограничено.
2. При перезагрузке На странице вы, вероятно, хотите, чтобы данные из localStorage устанавливали начальное состояние, поэтому загрузите данные в один из конструкторов

btw, просто используйте localStorage.getItem () и localStorage.setItem (). Вам не нужно устанавливать прототипы.