Saving data in the browser

Remembering things in the browser

Web Storage lets a page save small pieces of data in the browser as key and value pairs. A key is a name, like "theme", and a value is the text saved under it, like "dark". There are two kinds: localStorage and sessionStorage.

localStorage.setItem('city', 'Pune');
console.log(localStorage.getItem('city'));    // 'Pune'
console.log(localStorage.getItem('pincode')); // null (nothing saved)
localStorage.removeItem('city');

sessionStorage.setItem('step', '2'); // gone when the tab closes

Storing objects and arrays with JSON

Storage keeps only strings. If you save the number 5, you get back "5". If you save an array directly, you get the useless text "[object Object]". JSON (JavaScript Object Notation) is a text format for data: JSON.stringify turns an object into text, and JSON.parse turns it back.

const cart = [{ id: 'p1', name: 'Rice 5 kg', qty: 2 }];
localStorage.setItem('cart', JSON.stringify(cart));

function loadCart() {
  try {
    return JSON.parse(localStorage.getItem('cart')) ?? [];
  } catch {
    return []; // the saved text was broken
  }
}

Limits to remember

• Size: about 5 MB per site. Fine for settings, not for photos or videos.
• Only strings: use JSON for anything else.
• Same origin only: a page can read only the storage of its own origin (protocol + domain + port).
• The user can clear it at any time, and private windows forget it on close. Never keep the only copy of important data there.
• It is synchronous (the page waits while it reads), so keep the data small.

Cookies, briefly

A cookie is a small piece of text the browser stores and sends back to the server with every request. Servers use cookies to remember that you are logged in. You will rarely write cookies by hand in front-end code; the server sets them, and options like HttpOnly, Secure and SameSite keep them safe.

Example: remembering dark mode

const toggle = document.querySelector('#theme-toggle');
const root = document.documentElement;
root.dataset.theme = localStorage.getItem('theme') ?? 'light';

toggle.addEventListener('click', () => {
  const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
  root.dataset.theme = next;          // CSS uses [data-theme=dark]
  localStorage.setItem('theme', next); // remember the choice
});