Angular 5 хранит данные http в локальном хранилище - PullRequest
Новая
       0

Angular 5 хранит данные http в локальном хранилище

0 голосов
/ 12 сентября 2018

Я хочу минимизировать количество сетевых запросов от моего приложения, для этого я подумал о сохранении данных из GET API в локальном хранилище браузера.Я думал о том, чтобы сделать это в сервисе, чтобы всякий раз, когда есть запрос на GET API, приложение сначала проверяет локальное хранилище, если данные не существуют, а затем только делает сетевой запрос.Я тут запутался, как мне сохранить данные в локальном хранилище, т.е. как сохранить данные из сетевого запроса и затем отправить данные подписчику.Я знаю о методе .pipe (), но не знаю оператора rxjs, используемого для сохранения данных.

TIA

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Я работаю в реализации, аналогичной вашим требованиям.

Теперь, после входа в систему, я получаю все данные, которые не являются общими для изменения, например вспомогательные таблицы, и сохраняю их в localalstorage.Вам не нужно делать это, вы можете хранить их в памяти, я делаю это, потому что я также сохраняю токен, срок действия которого составляет 1 час.Если вы закрываете браузер и снова открываете его, я проверяю, существует ли токен и является ли он действительным, если это так, я пропускаю вход в систему.В этом случае я считываю все данные вспомогательных таблиц из localstorage.

Поэтому после входа в систему я вызываю метод службы InitCache. 

InitCache() {
  this.http.get<IEmpresa[]>(
     this.url() + 'empresas',
     { headers: this.getAuthHeaders() }
  ).subscribe(
     data => {
        this.cache.Empresas = data;
        this.SaveToLocalStorage("Empresas"); // This is only needed if you skip login
     } 
  )
...other gets
}

Затем у меня есть метод в службе, который язвоните, когда мне нужны эти данные. 

Empresas() {
   return this.cache.Empresas;
}

Это работает хорошо, но мне это не нравится, потому что вам нужно выйти / войти, чтобы обновить данные, или, что еще хуже, нажмите кнопку, ajjjjj.

Новое в разработке решение: поскольку я использую ядро ​​asp.net в качестве бэкэнда, я реализовал signalR.Я попытаюсь объяснить, что он делает.

Когда приложение angular запускается, оно подключается к хабу signalR и ожидает сообщений.В каждом контроллере конечной точки, когда я изменяю вспомогательную таблицу, я отправляю сообщение клиентам, информирующее, что «эта» таблица изменилась, обновите кэш.

Угловое приложение получает эти сообщения, делает getвызов, обновляет свой кэш и сохраняет в localalstorage.И ... самое главное, метод в сервисе теперь является BehaviourSubject, что означает, что при получении обновления оно отправляется всем подписчикам (я подписываюсь на эти данные в компонентах).

Надеюсь, мне удалось выразить словами эту идею.

0 голосов
/ 12 сентября 2018

Это довольно просто - и да, вы должны использовать pipe для этого 

return http.get("something").pipe(
   tap(value=>save your value in local storage)
)

tap имеет ту же сигнатуру (аргументы), что и subscribe, и она используется для просмотразначение в трубе - можно сказать, что оно ведет себя как подписка, но без фактической подписки.

...