useLocalStorage

Category

State

Export Size

1.18 kB

Last Changed

5 days ago

Reactive LocalStorage.

Demo

Usage

Please refer to useStorage.

import { useLocalStorage } from '@reause/core'

const [state, setState] = useLocalStorage('my-store', { hello: 'hi', greeting: 'Hello' })
const [flag, setFlag] = useLocalStorage('my-flag', true)

setState(null) // delete data from storage

Type Declarations

Toggle

export interface UseStorageOptions<T> {
    window?: Window;
    listenToStorageChanges?: boolean;
    writeDefaults?: boolean;
    mergeDefaults?: boolean | ((storageValue: T, defaults: T) => T);
    serializer?: Serializer<T>;
    onError?: (error: unknown) => void;
}

export type UseStorageReturn<T> = [
    value: T | null,
    setValue: Dispatch<SetStateAction<T | null>>
]

export function useLocalStorage(key: string, initialValue: string, options?: UseStorageOptions<string>): UseStorageReturn<string>

export function useLocalStorage(key: string, initialValue: boolean, options?: UseStorageOptions<boolean>): UseStorageReturn<boolean>

export function useLocalStorage(key: string, initialValue: number, options?: UseStorageOptions<number>): UseStorageReturn<number>

export function useLocalStorage<T>(key: string, initialValue: T | (() => T), options?: UseStorageOptions<T>): UseStorageReturn<T>

export function useLocalStorage<T = unknown>(key: string, initialValue: null, options?: UseStorageOptions<T>): UseStorageReturn<T>

export function useStorage(key: string, defaults: string, storage?: StorageLike, options?: UseStorageOptions<string>): UseStorageReturn<string>

export function useStorage(key: string, defaults: boolean, storage?: StorageLike, options?: UseStorageOptions<boolean>): UseStorageReturn<boolean>

export function useStorage(key: string, defaults: number, storage?: StorageLike, options?: UseStorageOptions<number>): UseStorageReturn<number>

export function useStorage<T>(key: string, defaults: T | (() => T), storage?: StorageLike, options?: UseStorageOptions<T>): UseStorageReturn<T>

export function useStorage<T = unknown>(key: string, defaults: null, storage?: StorageLike, options?: UseStorageOptions<T>): UseStorageReturn<T>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

ae4fc - fix(core): resolve useLocalStorage audit findings (#595)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)