Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

useLocalStorage

useState persisted to localStorage, synced across components and tabs.

HooksData@gaudi/design-system/hooks/data/use-local-storageView in StorybookSource

Stores a JSON value under a key. The server render and hydration use the initial value, and the stored value is read right after. Every caller with the same key stays in sync in this tab and in other tabs; blocked storage falls back to memory.

Usage

import { useLocalStorage } from '@gaudi/design-system/hooks';
const [fontSize, setFontSize, resetFontSize] = useLocalStorage('reader:font-size', 'md');

Examples

Reading preference

Storybook

Callers stay in sync

Storybook

Preferences follow the active key

Storybook

API

5 options
3 return values

Accessibility

Persisted preferences (text size, reduced motion, dismissed notices) must still have a visible control to change them back.

Notes

  • Never store secrets, tokens or personal data in localStorage.
useMapMap state with immutable set, replace, remove, clear and reset actions.useReadLocalStorageRead-only localStorage subscriptions shared with useLocalStorage.useSelectionMulti-select state in a Set, with select-all and indeterminate support.useSessionStorageuseState persisted to sessionStorage for one tab.