useLocalStorage

useLocalStorage provides a straightforward API to read and update values stored in localStorage, automatically handling JSON serialization and deserialization.

Install

npx shadcn@latest add https://unlogg.com/r/use-local-storage.json

pnpm dlx shadcn@latest add https://unlogg.com/r/use-local-storage.json

bunx shadcn@latest add https://unlogg.com/r/use-local-storage.json

Notes

• Automatically initializes localStorage with a default value if the key does not exist.
• Handles JSON serialization and deserialization for complex data types.
• Provides a simple API for reading and updating values.
• Includes error handling for environments where localStorage is unavailable (e.g., server-side rendering).

Examples

Todo List with Persistence

Use Cases

• Theme Preferences: Store user's preferred color scheme, theme settings, or UI preferences
• Form Data: Persist form inputs to prevent data loss during accidental page refreshes
• Shopping Cart: Save cart items locally before user authentication
• User Settings: Store user-specific configuration options and preferences
• Todo Lists: Maintain task lists that persist across browser sessions
• Recently Viewed: Track recently accessed items or pages
• Feature Flags: Store client-side feature toggle states

Server-Side Rendering

This hook checks if localStorage is available before accessing it. If used in a non-browser environment (e.g., during server-side rendering), it will return the defaultValue without attempting to access localStorage.

API Reference

Parameters

Returns