useSessionStorage

useState persisted to sessionStorage for one tab.

HooksData@gaudi/design-system/hooks/data/use-session-storageView in Storybook Source

The same API as useLocalStorage over sessionStorage: survives a reload, not a new tab. Good for wizard progress and half-filled forms.

Usage

import { useSessionStorage } from '@gaudi/design-system/hooks';
const [draft, setDraft, clearDraft] = useSessionStorage('contact:draft', { name: '', message: '' });

Examples

Keep a form draft

Storybook

API

4 options

3 return values

Accessibility

Restoring a form after a reload helps people who navigate slowly or lose their place; tell them the draft was restored and let them clear it.

Notes

Session storage is per tab, so there is no cross-tab sync.

useLocalStorageuseState persisted to localStorage, synced across components and tabs.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.