How to remember your users without a database.
Building something cool?
What You Get Inside 🎁
• Exclusive Discounts: Save up to 50% on essential software, APIs, and dev tools.
• Direct Feedback: Get honest, technical critiques on your builds from a community of peers.
• On-Demand Support: A dedicated space to troubleshoot roadblocks and solve technical hurdles.
• The Community: A vetted network of active makers who are building in public.
User picks a theme. Fills out half a form. Sets a preference. They refresh the page and it is all gone. Fixing this does not always need a backend, a database, or a user account. localStorage saves data directly in the browser and it survives page refreshes, tab closes, and browser restarts. Three methods is all you need to know.
The three methods
// save
localStorage.setItem('theme', 'dark');
// read
const theme = localStorage.getItem('theme'); // 'dark'
// delete
localStorage.removeItem('theme');That is the entire API. Everything is stored as a string, persists until explicitly removed, and is scoped to the domain — so yoursite.com cannot read what othersite.com stored.
That is the entire API. Everything is stored as a string, persists until explicitly removed, and is scoped to the domain. So yoursite.com cannot read what othersite.com stored.
Storing objects, not just strings
localStorage only stores strings. For anything more complex, serialize with JSON.stringify and parse it back with JSON.parse:
// save an object
const prefs = { theme: 'dark', fontSize: 16, lang: 'en' };
localStorage.setItem('prefs', JSON.stringify(prefs));
// read it back
const saved = JSON.parse(localStorage.getItem('prefs') ?? '{}');
console.log(saved.theme); // 'dark'The ?? '{}' fallback means if nothing is saved yet, JSON.parse gets an empty object instead of null. So your app does not crash on first visit.
A dark mode toggle that remembers
Combine localStorage with CSS custom properties and you get a theme toggle that persists across sessions:
// on page load — restore saved theme
const saved = localStorage.getItem('theme') ?? 'light';
document.documentElement.dataset.theme = saved;
// on toggle button click
btn.addEventListener('click', () => {
const next = document.documentElement.dataset.theme
=== 'dark' ? 'light' : 'dark';
document.documentElement.dataset.theme = next;
localStorage.setItem('theme', next);
});The user picks dark mode once. Every visit after that opens in dark mode automatically. No account, no server, no cookies.
Never store sensitive data in localStorage. It is readable by any JavaScript running on the page, including third-party scripts. Tokens, passwords, and personal data belong on the server or in an HttpOnly cookie. localStorage is for preferences, UI state, and non-sensitive user settings only.
5MB limit per domain. More than enough for preferences and settings. If you need to store larger amounts of structured data in the browser, look at IndexedDB. It is more complex but supports gigabytes and works offline too.
Why it matters
- No backend required. User preferences, draft form data, recently viewed items, collapsed sidebar state. None of these need a database or a user account.
- Instant on load. Reading from localStorage is synchronous and takes microseconds. The saved theme or preference is applied before the first paint, with no flash of wrong state.
- All browsers. Baseline 2010. The most universally supported browser storage API there is.
Start with localStorage for any UI state that should survive a page refresh. It handles 80% of the cases where people reach for a backend they do not actually need.
Happy coding!
Marko