ngx-webstore

A comprehensive Angular library for browser storage management with TypeScript support.

Features

• 🗄️ Multiple Storage Types - LocalStorage, SessionStorage, Cookies, IndexedDB
• ⏰ TTL Support - Auto-expiring data with Time-To-Live
• 🔐 Encryption - AES-GCM encryption via Web Crypto API
• 📛 Namespacing - Isolate storage by namespace/prefix
• 🔄 Reactive - RxJS Observables for real-time updates
• 🔗 Cross-Tab Sync - Synchronize state across browser tabs
• 🌐 Global State - Reactive in-memory state management
• 📦 Unified API - Single interface for all storage types

Installation

npm install ngx-webstore

Quick Start

1. Import the module

import { NgxWebStoreModule } from 'ngx-webstore';

@NgModule({
  imports: [
    NgxWebStoreModule.forRoot({
      namespace: 'myApp',
      encryption: {
        enabled: true,
        secret: 'your-secret-key'
      }
    })
  ]
})
export class AppModule {}

2. Use the services

import { LocalStorageService, GlobalStateService } from 'ngx-webstore';

@Component({...})
export class MyComponent {
  constructor(
    private localStorage: LocalStorageService,
    private globalState: GlobalStateService
  ) {}

  async saveData() {
    // Save with 1 hour TTL
    await this.localStorage.set('user', { name: 'John' }, { ttl: 3600000 });
  }

  async getData() {
    const user = await this.localStorage.get<{ name: string }>('user');
  }

  // Reactive updates
  watchData() {
    this.localStorage.watch<{ name: string }>('user').subscribe(user => {
      console.log('User changed:', user);
    });
  }
}

Available Services

| Service | Description | |---------|-------------| | LocalStorageService | Browser localStorage with TTL & encryption | | SessionStorageService | Browser sessionStorage with TTL & encryption | | CookieService | Cookie management with options | | IndexedDBService | IndexedDB with async operations | | GlobalStateService | Reactive in-memory state | | StorageManagerService | Unified API with fallback strategy |

Configuration Options

interface StorageConfig {
  namespace?: string;           // Key prefix (default: '')
  defaultTTL?: number;          // Default TTL in ms
  defaultStorage?: StorageType; // 'localStorage' | 'sessionStorage' | 'cookie' | 'indexedDB'
  fallbackOrder?: StorageType[];// Fallback order when primary fails
  encryption?: {
    enabled: boolean;
    secret?: string;
    keyDerivationIterations?: number; // PBKDF2 iterations (default: 100000)
  };
  indexedDB?: {
    dbName?: string;
    storeName?: string;
    version?: number;
  };
  cookie?: {
    path?: string;
    domain?: string;
    secure?: boolean;
    sameSite?: 'Strict' | 'Lax' | 'None';
  };
}

Compatibility

• Angular 18.x, 19.x
• RxJS 7.8+
• TypeScript 5.4+

License

MIT