fn
useStorage
v0.0.12testeddemoReactive Storage binding — creates a ref synced with a storage backend
Examples
ts
const count = useStorage('my-count', 0, storage);ts
const state = useStorage('my-state', { hello: 'world' }, storage);ts
const id = useStorage('my-id', 'default', storage, {
serializer: { read: (v) => v, write: (v) => v },
});Demo
Loading demo…
Signatures
ts
export function useStorage<T extends string>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;ts
export function useStorage<T extends number>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;ts
export function useStorage<T extends boolean>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;ts
export function useStorage<T>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, storage: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;ts
export function useStorage<T = unknown>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<null>, storage: StorageLike, options?: UseStorageOptions<T>): RemovableRef<T>;Type Parameters
TParameters
| Parameter | Type | Description |
|---|---|---|
key | MaybeRefOrGetter<string> | The storage key (can be reactive) |
initialValue | MaybeRefOrGetter<T> | The initial/default value |
storage | StorageLike | The storage key (can be reactive) |
options? | UseStorageOptions<T> | Options |
Returns
RemovableRef<T>A reactive ref synced with storage