Сохранение состояния приложения angular между перезагрузками страницы

Question

Каков будет хороший подход для реализации сохранения состояния между перезагрузками страницы? Сейчас я не говорю о состоянии в контексте ngrx. Я имею в виду тот случай, когда вы обновляете sh страницу, и кажется, что все пропало: пользователь вышел из системы, все изменения, которые не сохранены на сервере, пропали и так далее.

Сначала я подумал, что это можно каким-то образом реализовать с помощью localStorage, а затем инициализировать все в ngOnInit () в каждом компоненте, который мне нужен, но это звучит как изобретение колеса. Я считаю, что должно быть готовое решение или какой-то шаблон.

Пожалуйста, сообщите.

Answer 1

Быстрый поиск в Интернете указывает на ngrx-store-localstorage , который помогает сохранять состояние приложения в localstorage. Пример реализации с их сайта ниже.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule, ActionReducerMap, ActionReducer, MetaReducer } from '@ngrx/store';
import { localStorageSync } from 'ngrx-store-localstorage';
import { reducers } from './reducers';
 
 
const reducers: ActionReducerMap<IState> = {todos, visibilityFilter};
 
export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
  return localStorageSync({keys: ['todos']})(reducer);
}
const metaReducers: Array<MetaReducer<any, any>> = [localStorageSyncReducer];
 
@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot(
        reducers,
        {metaReducers}
    )
  ]
})
export class MyAppModule {}

Answer 2

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