What does localStorage do?

JavaScriptJunior~2 min read

localStorage is the browser's built-in storage, which lets you keep data across page reloads. It's a simple way to store small amounts of data right in the user's browser.

Definition

localStorage is an object provided by the browser that lets you store "key-value" pairs (strings) in persistent storage on the client side.

Data in localStorage:

is not removed when the page refreshes,
is available within the domain,
and persists even after the browser is closed.

1. The simplest example

javascript

// Save a value
localStorage.setItem('username', 'Tim');

// Read a value
console.log(localStorage.getItem('username')); // "Tim"

// Remove one value
localStorage.removeItem('username');

// Clear the whole storage
localStorage.clear();

2. Storage structure

localStorage stores everything as strings:

javascript

localStorage.setItem('count', 10);
console.log(typeof localStorage.getItem('count')); // "string"

To store objects, you need to use JSON.stringify() and JSON.parse():

javascript

const user = { name: 'Tim', age: 25 };

localStorage.setItem('user', JSON.stringify(user));

const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // "Tim"

3. The main `localStorage` methods

Method	What it does	Example
`setItem(key, value)`	Saves a value	`localStorage.setItem('theme', 'dark')`
`getItem(key)`	Gets a value	`localStorage.getItem('theme')`
`removeItem(key)`	Removes an item	`localStorage.removeItem('theme')`
`clear()`	Completely clears the storage	`localStorage.clear()`
`key(index)`	Returns the key at an index	`localStorage.key(0)`
`length`	The number of entries in storage	`localStorage.length`

4. Example: saving the site theme

javascript

const toggle = document.querySelector('#toggle');

// On page load
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark');
}

// On click
toggle.addEventListener('click', () => {
  document.body.classList.toggle('dark');
  const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
  localStorage.setItem('theme', theme);
});

Now the browser remembers the chosen theme, and the next time the user visits, they see the same mode.

5. Difference from `sessionStorage`

Storage	Lives until...	Available after a reload	Shared between tabs
`localStorage`	The user clears it themselves	Yes	Yes (the same domain)
`sessionStorage`	The tab stays open	No	No

6. Limits and security

The size of localStorage is limited (usually 5-10 MB).
It works only with text data.
You cannot store passwords, tokens, or sensitive information in plain form.
The data is available only within the same domain (per the same-origin rule).

7. Reacting to changes (between tabs)

If you open one site in two tabs and change localStorage in one, the storage event fires in the other:

javascript

window.addEventListener('storage', (event) => {
  console.log('localStorage change:', event.key, event.newValue);
});

Summary

What it does	Example
Stores data locally	`localStorage.setItem('key', 'value')`
Not cleared on reload	Yes
Accessible from any JS on the same domain	Yes
Stores only strings	Use `JSON.stringify()`
Security	Don't store sensitive data
Size	~5 MB

Remember it simply: localStorage is like a "mini database" in the browser, where you can store settings, tokens, history, or application state, and retrieve them even after closing the tab.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.