Registry / storage / ngrx-store-localstorage

ngrx-store-localstorage

library20.1.0jsnpmunverified

Synchronizes Angular state managed by @ngrx/store with browser's localStorage or sessionStorage. Version 20.1.0 supports Angular 20+ and @ngrx/store 20+. It provides a configurable meta-reducer that automatically persists specified state slices on every dispatch and rehydrates on app load. Differentiators include partial key sync, custom serialization/deserialization, encryption support, and optional storage change detection. Maintenance is active via semantic-release and CI (CircleCI).

storage

npm install ngrx-store-localstorage

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · NGRX-STORE-LOCALST

ngrx-store-localstorage

storagejavascriptv20.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

localStorageSync

✓ import { localStorageSync } from 'ngrx-store-localstorage'

✗ import localStorageSync from 'ngrx-store-localstorage'

Named export, not default. Common in Angular meta-reducers.

LocalStorageConfig

✓ import { LocalStorageConfig } from 'ngrx-store-localstorage'

TypeScript interface for configuration object. Only useful with TypeScript.

ngrxStoreLocalstorage (CommonJS)

✓ const { localStorageSync } = require('ngrx-store-localstorage')

✗ const ngrxStoreLocalstorage = require('ngrx-store-localstorage')

CommonJS requires destructuring for named exports.

Shows how to create a localStorageSync meta-reducer and include it in StoreModule.forRoot to persist a specific reducer key ('todos') to localStorage.

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store'; import { localStorageSync } from 'ngrx-store-localstorage'; // Example reducer state interface IState { todos: string[]; visibilityFilter: string; } // Placeholder reducers function todosReducer(state: string[] = [], action: any): string[] { return state; } function visibilityFilterReducer(state: string = 'SHOW_ALL', action: any): string { return state; } export const reducers = { todos: todosReducer, visibilityFilter: visibilityFilterReducer }; 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 AppModule {} // App usage: dispatch actions normally; 'todos' state automatically syncs to localStorage

Debug

Known issues

breakingAngular version mismatch: ngrx-store-localstorage 20.x requires @angular/core >=20.0.0 and @ngrx/store >=20.0.0. Using with older versions causes runtime errors.

fix

Upgrade Angular and @ngrx/store to version 20 or later.

affects: >=20.0.0

deprecatedThe 'storageKeySerializer' option is deprecated starting from v20. Use custom serialize/deserialize functions instead.

fix

Replace storageKeySerializer with key-specific configuration using serialize/deserialize functions.

affects: >=20.0.0

gotchaIf you sync the entire state object (e.g., keys: ['*']), any non-serializable values (functions, Maps, Sets) will cause JSON.stringify errors. Ensure state is serializable.

fix

Use partial key sync or define serialize/deserialize functions to handle non-serializable values.

affects: *

gotchaRehydration from localStorage happens synchronously when the store is created. If the stored data is malformed or outdated, it can corrupt your app state. Always validate data on load.

fix

Implement a custom reviver function to validate and migrate data during deserialization.

affects: *

breakingIn v18 and earlier, the peer dependency on @angular/common was optional. From v20, it is required. If your Angular version does not include @angular/common, installation will fail.

fix

Ensure @angular/common is installed. Typically it's included with Angular projects.

affects: >=20.0.0

Errors

Common errors & fixes

Cannot find module 'ngrx-store-localstorage' or its corresponding type declarations.

TypeScript cannot resolve the module; missing installation or incorrect import path.

fix

Run `npm install ngrx-store-localstorage --save` and ensure the import path is exactly 'ngrx-store-localstorage'.

TypeError: localStorageSync is not a function

Importing incorrectly as default export instead of named export.

fix

Change import to: `import { localStorageSync } from 'ngrx-store-localstorage'`

NullInjectorError: No provider for InjectionToken @ngrx/store

Forgot to include StoreModule.forRoot in your imports.

fix

Add `StoreModule.forRoot(reducers, { metaReducers })` to the imports array of your NgModule.

JSON.parse error: Unexpected token u in JSON at position 0

localStorage contains malformed JSON (e.g., 'undefined' string) due to previous interruption.

fix

Clear localStorage manually: `localStorage.removeItem('your-key')` or implement a try-catch in the reviver.

Upgrade

Version history

20.1.0latest on npm

Audit

Dependencies

@angular/commonrequiredPeer dependency; provides browser localStorage APIs

@angular/corerequiredPeer dependency; Angular framework

@ngrx/storerequiredPeer dependency; provides store and meta-reducer mechanism

Agent activity

16 hits · last 30 days

node

Amazon

Resources

githubssh://git@github.com/btroncone/ngrx-store-localstorage ↗

packagengrx-store-localstorage ↗

homepagehttps://github.com/btroncone/ngrx-store-localstorage#readme ↗