WrStorage

import { provideWrStorage, WrStorage } from 'ngwr/storage';

bootstrapApplication(AppComponent, {
  providers: [
    // Optional — defaults to localStorage with an in-memory SSR fallback.
    provideWrStorage({ prefix: 'myapp:', ttl: 24 * 60 * 60 * 1000 }),
  ],
});

// Swap the engine globally (e.g. sessionStorage for a tab-only app):
provideWrStorage({ engine: sessionStorage })

// Or lazily — useful when wrapping with encryption / IndexedDB / a worker bridge:
provideWrStorage({ engine: () => new EncryptedStorage(localStorage, key) })

// Or directly via the token (per-feature overrides through nested injectors):
providers: [{ provide: WR_STORAGE_ENGINE, useValue: sessionStorage }]

private readonly store = inject(WrStorage);

this.store.set('user', { name: 'Ada' });
this.store.get<{ name: string }>('user');         // → { name: 'Ada' }

this.store.set('cart', items, { ttl: 60_000 });   // expires in 60s
this.store.has('cart');                            // true → false after 60s

const theme = this.store.watch<'light' | 'dark'>('theme', 'light');
effect(() => console.log('theme is', theme()));

import type { WrStorageEnvelope } from 'ngwr/storage';

// provideWrStorage({ prefix: 'myapp:' })
store.set('theme', 'dark');
// localStorage['myapp:theme'] === '{"v":"dark"}'

store.set('cart', [{ sku: 'a1' }], { ttl: 60_000 });
// localStorage['myapp:cart'] === '{"v":[{"sku":"a1"}],"e":1767225600000}'

// Reading the same key from outside Angular — a pre-paint script, a worker:
const raw = localStorage.getItem('myapp:theme');
const env = raw === null ? null : (JSON.parse(raw) as WrStorageEnvelope<string>);
const value = env && (env.e === undefined || env.e >= Date.now()) ? env.v : null;