WrStorage

import { WrStorage } from 'ngwr/storage';

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 }); // gone after 60 s
this.store.has('cart'); // ignores expiry

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

provideWr(withStorage({ engine: sessionStorage }))

// A factory, for a wrapper such as encrypted storage:
provideWr(withStorage({ engine: () => new EncryptedStorage(localStorage, key) }))

// Or the token, at bootstrap only:
providers: [{ provide: WR_STORAGE_ENGINE, useValue: sessionStorage }]

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

// provideWr(withStorage({ 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 it outside Angular:
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;