useLocalStorage
A Hook that store state into localStorage.
Examples
Store state into localStorage
Store state into localStorage
Refresh this page and you will get the state from localStorage.
Store complex types of data
a-e-i-o-u
Store complex types such as array or object
useLocalStorageState will do the serialization and deserialization work automatically.
Custom serialization and deserialization functions
Custom serialization and deserialization functions
You may not need the default `JSON.stringifyJSON.parse` to serialize string.
API
If you want to delete this record from localStorage, you can use setState() or setState(undefined).
interface Options<T> { defaultValue?: T | (() => T); serializer?: (value: T) => string; deserializer?: (value: string) => T; onError?: (error: unknown) => void; watch?: boolean}const [state, setState] = useLocalStorage<T>( key: string, options: Options<T>): [Accessor<T>, (value?: Setter<T>) => void];
interface Options<T> { defaultValue?: T | (() => T); serializer?: (value: T) => string; deserializer?: (value: string) => T; onError?: (error: unknown) => void; watch?: boolean}const [state, setState] = useLocalStorage<T>( key: string, options: Options<T>): [Accessor<T>, (value?: Setter<T>) => void];
Result
| Property | Description | Type |
|---|---|---|
| state | Local localStorage value | Accessor<T> |
| setState | Update localStorage value | Setter<T> |
Options
| Property | Description | Type | Default |
|---|---|---|---|
| defaultValue | Default value | any | (() => any) | - |
| serializer | Custom serialization method | (value: any) => string | JSON.stringify |
| deserializer | Custom deserialization method | (value: string) => any | JSON.parse |
| onError | On error callback | (error: unknown) => void | (e) => { console.error(e) } |
| observer | Watch changes | boolean | false |
Remark
useLocalStorageState will call serializer before write data to localStorage, and call deserializer once after read data.