How to encrypt state with ngrx-store-localstorage?

Use the encrypt and decrypt functions in the keys configuration. For example, provide (state: string) => btoa(state) for basic encoding, but for security, integrate proper encryption libraries like CryptoJS.

ngrx-store-localstorage vs manual localStorage handling in Angular?

This library automates syncing within the NgRx lifecycle, reducing boilerplate and ensuring consistency, whereas manual handling requires custom logic for save/load, state merging, and error handling.

How to sync only specific properties in the state?

Configure the keys array with objects specifying filter properties. For instance, use { todos: ['name', 'status'] } to persist only those fields, as described in the partial sync documentation.

Can ngrx-store-localstorage work with Angular Universal?

Yes, but you must set checkStorageAvailability to true and handle storage absence on the server, since localStorage isn't available in Node.js environments during SSR.

What are the limits for state size in localStorage?

Browser storage typically caps at 5-10MB per origin. The library doesn't handle quota errors, so developers should monitor usage and implement fallbacks for large states.

How to implement 'remember me' with this library?

Use the syncCondition function to check authentication state, e.g., syncCondition: (state) => state.auth.rememberMe, ensuring persistence only when the flag is true.

Open-Awesome

ngrx-store-localstorage

MITTypeScriptv20.1.0

A meta-reducer that automatically syncs @ngrx store state with browser local or session storage.

GitHub

624 stars118 forks0 contributors

What is ngrx-store-localstorage?

ngrx-store-localstorage is an NgRx meta-reducer library that automatically persists the application's Redux state to the browser's local storage or session storage. It solves the problem of state loss on page reloads by seamlessly syncing defined state slices, enabling features like user preferences, form drafts, or shopping carts to survive browser sessions.

Target Audience

Angular developers using NgRx for state management who need to persist application state across page reloads or browser sessions without implementing custom storage logic.

Value Proposition

Developers choose it for its tight integration with NgRx, minimal configuration, and powerful features like conditional syncing, encryption, and custom serialization—saving time over building and maintaining a custom persistence layer.

Overview

Simple syncing between @ngrx store and local storage

Use Cases

Best For

Persisting user preferences or settings in an Angular/NgRx app
Saving form drafts or multi-step wizard state across page reloads
Maintaining shopping cart or session data in e-commerce applications
Implementing 'remember me' authentication state persistence
Syncing NgRx state across multiple browser tabs
Storing UI state like sidebar collapse or theme selection

Not Ideal For

Projects not using Angular with NgRx for state management
Applications needing to persist large datasets beyond browser storage limits (e.g., >5-10MB)
Teams requiring zero-config server-side rendering without JavaScript handling
Real-time applications where state must sync directly with a backend database

Pros & Cons

Pros

Automatic State Sync

Seamlessly integrates as an NgRx meta-reducer to automatically persist state to localStorage or sessionStorage, eliminating manual save/load code as shown in the usage examples.

Flexible Configuration

Supports granular control through keys configuration, allowing partial state syncing, custom serialization, and encryption, detailed in the LocalStorageConfig API.

Conditional Persistence

Enables context-aware syncing with the syncCondition function, such as for 'remember me' features, ensuring state is only saved under specified conditions.

Cross-Tab Synchronization

Includes known workarounds for syncing state across multiple browser tabs, addressing a common pain point in multi-window applications.

Cons

Framework Lock-in

Tightly coupled with Angular and NgRx, making it unsuitable for projects using other frameworks or state management libraries, as noted in the dependencies.

Configuration Complexity

The extensive API with nested options and custom functions can be overwhelming for simple use cases, requiring a steep learning curve to leverage fully.

Storage Size Constraints

Relies on browser storage with inherent limits (typically 5-10MB per origin), not ideal for large state objects without external management.

SSR Overhead

Requires explicit handling for server-side rendering via checkStorageAvailability, adding setup complexity for Angular Universal apps.

Frequently Asked Questions

Related Projects

Official GitHub repository

Reactive State for Angular

Stars8,318

Forks2,045

Last commit1 day ago

angular-ngrx-nx-realworld-example-app

Real world application built with Angular 21, NgRx 21, nrwl/nx 22

Stars1,038

Forks295

Last commit12 days ago

ngrx-course

NgRx (with NgRx Data) -The Complete Guide

Stars425

Forks584

Last commit8 days ago

ngrx-toolkit

Various Extensions for the NgRx Signal Store

Stars324

Forks48

Last commit24 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub