Saving state of angular app between page reloads

Question

What would be a good approach to implement state persistence between page reloads? Right now I am not talking about state in context of ngrx. I am referring to that case when you refresh the page and everything seems to be gone : user is logged out, all changes that are not saved on backend are gone and so on.

At first I thought that this can be somehow implemented using localStorage and then init everything in ngOnInit() in every component I need, but it sounds like inventing a wheel. I believe there should be a ready solution, or some pattern.

Please advise.

Answer 1

A quick search in the web points to ngrx-store-localstorage which helps to store application state in localstorage. A sample implementation from their website below.

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 {}