Stop 01 · Internet & Web BasicsTopics · 9/14

LocalStorage

In short

Want your app to remember dark mode or a half-written note even after the tab closes? localStorage gives you a small, simple storage box right in the browser.

A browser API that stores key-value string data on the user's device with no expiration — persists even after the browser is closed. It is convenient for non-sensitive client preferences and cached UI state, but it should not be treated as a secure place for secrets because JavaScript running on the origin can access it.

The jaadu puts a bag into its college locker and turns the key.

Think of it like this

Your locker at college

You keep stuff there and it stays for days, until you clear it. But it's only at your college: another college (website) has its own lockers and can't open yours.

Watch it happen

Saving dark mode

Your code

localStorage

setItem('theme', 'dark')

1/5You save the user's choice under a key.

The big ideas

What you need to know

Strings only

localStorage stores key-value pairs as strings. Use JSON.stringify to save objects and JSON.parse to read them.

It doesn't expire

Data stays until your code or the user clears it, even after the browser restarts.

One box per site

Each origin (protocol + domain + port) gets its own storage, usually around 5 MB.

Not for secrets

Any script on the page can read it, so never keep passwords or login tokens there.

See it in code

Walk through the code

1const settings = { theme: "dark", fontSize: 16 };2 3// Save (objects must become strings)4localStorage.setItem("settings", JSON.stringify(settings));5 6// Read it back, with a safe default7const saved = JSON.parse(localStorage.getItem("settings") ?? "{}");8 9// Remove one key, or everything10localStorage.removeItem("settings");11localStorage.clear();

1/3Objects must become strings first, so JSON.stringify before saving.

getItem returns null when nothing is saved, so the ?? "{}" fallback stops JSON.parse from failing.

Save yourself the pain

Common mistakes

Oops

Saving an object directly, which stores '[object Object]'.

Do this instead

Always JSON.stringify before saving and JSON.parse when reading.

Oops

Keeping a login token in localStorage.

Do this instead

Keep auth tokens in HttpOnly cookies. Use localStorage for harmless things like theme or filters.

Oops

Reading localStorage while a Next.js page renders on the server.

Do this instead

Read it inside useEffect or other browser-only code, because it doesn't exist on the server.

Your mission

A theme switch that remembers

~20 min

Quick check

You run localStorage.setItem('user', { name: 'Riya' }). What gets saved?

Go deeper

1Open DevTools' Application tab and manually add/read localStorage values. Inspect at least one real example and note what each important field or stage represents.
2Practice `localStorage.setItem`, `getItem` and `removeItem` in the console. Test it with at least one normal case and one edge case so you can explain the behavior confidently.
3Learn its 5-10MB size limit and that it's synchronous (can block the main thread).