Syllabus

HTML Web Storage (localStorage & sessionStorage)

Badar KhalilUpdated September 27, 2026 2 min read

HTML Web Storage: localStorage & sessionStorage

The Web Storage API gives web pages a simple key-value store in the browser, letting you save small amounts of data on the user's device without needing cookies or a server round-trip. It comes in two flavors: localStorage and sessionStorage, both accessed through nearly identical JavaScript methods.

localStorage vs sessionStorage

localStorage — data persists indefinitely, even after the browser is closed and reopened, until explicitly cleared.
sessionStorage — data lasts only for the current browser tab's session; it's cleared automatically when the tab is closed.

Both are scoped per-origin (protocol + domain + port), meaning one website cannot read another website's stored data.

Core Methods

setItem(key, value) — stores a value under a key.
getItem(key) — retrieves the stored value, or null if it doesn't exist.
removeItem(key) — deletes a single key.
clear() — removes everything stored for that origin.

Storing Objects and Arrays

Web Storage can only store strings. To save an object or array, convert it with JSON.stringify() before storing, and parse it back with JSON.parse() when reading it.

Listening for Storage Changes

The storage event fires on other open tabs (of the same origin) whenever localStorage changes, which is useful for syncing state across multiple open tabs of the same app in real time.

Limitations

Most browsers cap Web Storage at around 5–10MB per origin, it's synchronous (which can block the main thread for large amounts of data), and it should never be used to store sensitive information like passwords or tokens, since it's accessible to any script running on the page.

Common Use Cases

Remembering a user's theme preference (dark/light mode), saving unsaved form drafts, caching API responses, storing a shopping cart, or remembering a "don't show this again" dismissal.

Try it Yourself JAVASCRIPT

// Saving and reading a simple string value
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme')); // 'dark'

// Removing a single key
localStorage.removeItem('theme');

// sessionStorage works the same way, but only lasts for the tab's session
sessionStorage.setItem('formDraftSaved', 'true');

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

// Storing and retrieving an object using JSON
const cart = { items: ['shirt', 'shoes'], total: 59.99 };
localStorage.setItem('cart', JSON.stringify(cart));

const savedCart = JSON.parse(localStorage.getItem('cart'));
console.log(savedCart.items); // ['shirt', 'shoes']

// Listening for changes made in other tabs
window.addEventListener('storage', (event) => {
  console.log(`${event.key} changed from ${event.oldValue} to ${event.newValue}`);
});

Output

Press Run to execute.

Exercise: Persist a Dark Mode ToggleJAVASCRIPT

Write JavaScript that saves the user's dark-mode choice ('on' or 'off') to localStorage whenever a toggle button is clicked, and reads it back on page load to apply the correct theme immediately.

Try it Yourself JAVASCRIPT

const toggleBtn = document.getElementById('darkModeToggle');

// TODO: on click, save preference to localStorage

// TODO: on page load, read preference and apply theme

Output

Press Run to execute.

Show expected output

Clicking the toggle stores 'on' or 'off' in localStorage under a theme key, and reloading the page reapplies the saved value.

This is a self-check — compare your result with the expected output above.

Was this page helpful?