useLocalStorage

PreviewCopy Anchor Link

UsageCopy Anchor Link

import { useLocalStorage } from '@vitnode/core/hooks/use-local-storage'

const [name, setName] = useLocalStorage('name', '')

return <input onChange={(e) => setName(e.target.value)} value={name} />

Pass a key and a default, get the value and a setter, just like useState. Values are stored as JSON, so numbers, booleans, arrays and plain objects come back as you saved them.

Update and resetCopy Anchor Link

The setter takes a function that gets the freshest value. The third item removes the key and falls back to the default.

const [count, setCount, resetCount] = useLocalStorage('count', 0)

setCount((previous) => previous + 1)
resetCount()

Good to knowCopy Anchor Link

• Synced everywhere. Every component using the same key updates together, in this tab and in other tabs.
• Server-safe. The server renders the default, then the browser switches to the stored value without a hydration mismatch.
• No crashes. A broken stored value falls back to the default. Blocked or full storage keeps the value in memory for the session.
• Nice-to-haves only. Storage lives in one browser on one device. Use it for a collapsed panel or a draft, never for data the server needs.

ReturnsCopy Anchor Link