useLocalStorage

Persist client state into local or session storage for simple settings and drafts.

Preview

Persisted preference example

A local-storage helper often powers simple user preferences like theme, density, or navigation state.

Current theme preference: light

Use this hook when a local preference or draft should survive page refreshes without introducing a larger state layer.

Registry install

pnpm dlx shadcn@latest add https://react.tileui.zmorg.cn/r/use-local-storage.json

Usage

const [value, setValue] = useLocalStorage('theme', 'light');

What it covers

  • Local storage reads and writes
  • Safe initialization in browser-only contexts
  • A simple setter API that mirrors React state

Common use cases

  • Theme preferences
  • Persisted filters
  • Draft values in admin tools