useLocalStorageState

A Hook that store state into localStorage.

Code demonstration

Basic usage

Advanced usage

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;
}
const [state, setState] = useLocalStorageState<T>(
  key: string,
  options: Options<T>
): [T?, (value?: T | ((previousState: T) => T)) => void];

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

Result

Property	Description	Type
state	Local Storage-value	Ref<any | undefined>
setState	Set Storage value	SetState

Remark

useLocalStorageState will call serializer before write data to localStorage, and call deserializer once after read data.

Source

Source · Document · Demo