We previously implemented localStorage-based persistence. Now, let’s explore:
✅ SessionStorage-based persistence (State resets when the tab is closed)
✅ IndexedDB-based persistence (For large, structured state storage)

---

📌 Option 1: Using Session Storage in NgRx

🔹 Session storage is best when:

• You want to persist state only for the active session (until the tab is closed).

• You don’t want to keep data after the user leaves the app.

---

1️⃣ Create a MetaReducer for Session Storage

Modify projects/mfe1/src/app/store/session-storage.reducer.ts:

import { ActionReducer, INIT, UPDATE } from '@ngrx/store';

export function sessionStorageMetaReducer<S>(reducer: ActionReducer<S>): ActionReducer<S> {
  return (state, action) => {
    if (action.type === INIT || action.type === UPDATE) {
      const savedState = sessionStorage.getItem('appState');
      return savedState ? JSON.parse(savedState) : state;
    }

    const nextState = reducer(state, action);
    sessionStorage.setItem('appState', JSON.stringify(nextState));
    return nextState;
  };
}

🔍 What it Does:

• On App Start (INIT) → Loads state from sessionStorage.

• On Any Update → Saves the latest state to sessionStorage.

---

2️⃣ Apply Session Storage MetaReducer

Modify projects/mfe1/src/app/app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule, MetaReducer } from '@ngrx/store';
import { counterReducer } from './store/counter.reducer';
import { sessionStorageMetaReducer } from './store/session-storage.reducer';
import { AppComponent } from './app.component';

const metaReducers: MetaReducer<any>[] = [sessionStorageMetaReducer];

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ count: counterReducer }, { metaReducers }), // Apply Session Storage
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

✅ Now, the state resets when the tab is closed, but persists while browsing.

---

📌 Option 2: Using IndexedDB in NgRx

🔹 IndexedDB is best when:

• You need to store large amounts of structured state (e.g., user data, forms, e-commerce cart).

• You want persistent state without blocking the main thread (better performance than localStorage).

1️⃣ Install IndexedDB Library

We’ll use idb-keyval, a simple IndexedDB wrapper:

npm install idb-keyval

---

2️⃣ Create an IndexedDB MetaReducer

Modify projects/mfe1/src/app/store/indexeddb.reducer.ts:

import { ActionReducer, INIT, UPDATE } from '@ngrx/store';
import { set, get } from 'idb-keyval';

export function indexedDBMetaReducer<S>(reducer: ActionReducer<S>): ActionReducer<S> {
  return async (state, action) => {
    if (action.type === INIT || action.type === UPDATE) {
      const savedState = await get('appState');
      return savedState ? savedState : state;
    }

    const nextState = reducer(state, action);
    await set('appState', nextState);
    return nextState;
  };
}

🔍 How it Works:

• On App Load (INIT), it asynchronously fetches state from IndexedDB.

• On State Update, it stores the latest state in IndexedDB.

---

3️⃣ Apply IndexedDB MetaReducer

Modify projects/mfe1/src/app/app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule, MetaReducer } from '@ngrx/store';
import { counterReducer } from './store/counter.reducer';
import { indexedDBMetaReducer } from './store/indexeddb.reducer';
import { AppComponent } from './app.component';

const metaReducers: MetaReducer<any>[] = [indexedDBMetaReducer];

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ count: counterReducer }, { metaReducers }), // Apply IndexedDB
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

✅ IndexedDB now stores the state persistently without blocking the main thread! 🎉

---

🔥 Which Persistence Method Should You Choose?

---

🔥 Final Summary

✅ SessionStorage → Best for temporary state, resets when the tab closes.
✅ IndexedDB → Best for scalable, non-blocking persistence (recommended for large apps).
✅ Both work well with NgRx + Micro Frontends.