JavaScript Web Storage

The browser gives JavaScript three ways to store data on the user's device: localStorage, sessionStorage, and cookies. Each has different rules about how long data lasts, how much it can store, and when the server can see it. Choosing the right one depends on your use case.

The Three Storage Types at a Glance

Diagram: Storage Comparison

Storage Type    │ Lifetime            │ Size   │ Sent to Server
────────────────┼─────────────────────┼────────┼───────────────
localStorage    │ Until manually      │ ~5 MB  │ No
                │ cleared             │        │
────────────────┼─────────────────────┼────────┼───────────────
sessionStorage  │ Until tab closes    │ ~5 MB  │ No
────────────────┼─────────────────────┼────────┼───────────────
Cookies         │ Custom (expiry date)│ ~4 KB  │ Yes (every request)

Part 1: localStorage

Data in localStorage stays in the browser until JavaScript explicitly removes it or the user clears browser data. It persists across sessions — close the tab, open it again, and the data is still there.

Core Methods

// Store a value
localStorage.setItem("username", "Priya");

// Read a value
let name = localStorage.getItem("username");
console.log(name); // "Priya"

// Remove a specific key
localStorage.removeItem("username");

// Clear everything in localStorage
localStorage.clear();

Storing Objects (JSON Conversion Required)

localStorage only stores strings. Convert objects to JSON strings before storing, and parse them back after reading.

let user = { name: "Rahul", age: 28, city: "Delhi" };

// Save object
localStorage.setItem("user", JSON.stringify(user));

// Read object back
let savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // "Rahul"
console.log(savedUser.city); // "Delhi"

Diagram: Object Storage Round-Trip

Object: { name: "Rahul", age: 28 }
  │
  JSON.stringify()
  │
String: '{"name":"Rahul","age":28}'
  │
  localStorage.setItem("user", ...)
  │
  ─── stored in browser ───
  │
  localStorage.getItem("user")
  │
String: '{"name":"Rahul","age":28}'
  │
  JSON.parse()
  │
Object: { name: "Rahul", age: 28 }

Real Use: Saving Theme Preference

// User chooses dark mode
function setTheme(theme) {
  document.body.className = theme;
  localStorage.setItem("theme", theme);
}

// On page load, restore preference
window.addEventListener("load", function() {
  let savedTheme = localStorage.getItem("theme");
  if (savedTheme) {
    document.body.className = savedTheme;
  }
});

setTheme("dark");

Part 2: sessionStorage

Works exactly like localStorage but data only lasts for the current browser tab session. When the user closes the tab (not just navigates away — actually closes it), all sessionStorage data is gone. Opening the same URL in a new tab starts a fresh session.

// Store
sessionStorage.setItem("step", "2");

// Read
console.log(sessionStorage.getItem("step")); // "2"

// Remove
sessionStorage.removeItem("step");

Real Use: Multi-Step Form Progress

// Step 1 page — save progress
sessionStorage.setItem("formStep1", JSON.stringify({
  name: "Anjali",
  email: "anjali@mail.com"
}));

// Step 2 page — read step 1 data
let step1Data = JSON.parse(sessionStorage.getItem("formStep1"));
console.log(step1Data.name); // "Anjali"

// When form is completed, clear session data
sessionStorage.clear();

Diagram: sessionStorage vs localStorage Lifetime

Action               │ localStorage    │ sessionStorage
─────────────────────┼─────────────────┼───────────────
Navigate to new page │ Data stays      │ Data stays
Refresh page         │ Data stays      │ Data stays
Close tab            │ Data stays      │ Data GONE ✗
Open new tab (same)  │ Data accessible │ Fresh session
Close browser        │ Data stays      │ Data GONE ✗

Part 3: Cookies

Cookies are small pieces of data stored in the browser. Unlike localStorage, cookies are sent with every HTTP request to the server — making them the standard choice for session authentication tokens and user identification.

Setting a Cookie with JavaScript

// Set a cookie
document.cookie = "username=Kiran";

// Set with expiry date
document.cookie = "username=Kiran; expires=Fri, 31 Dec 2026 23:59:59 GMT";

// Set with path (accessible on the whole site)
document.cookie = "username=Kiran; path=/";

Reading Cookies

console.log(document.cookie);
// "username=Kiran; theme=dark; lang=en"
// Returns ALL cookies as one string

Parsing a Specific Cookie

function getCookie(name) {
  let cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    let [key, value] = cookie.split("=");
    if (key === name) return value;
  }
  return null;
}

console.log(getCookie("username")); // "Kiran"
console.log(getCookie("theme"));    // "dark"

Deleting a Cookie

// Set expiry to the past — browser removes it
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Diagram: Cookie Sent With Every Request

Browser                         Server
  │                               │
  │── GET /dashboard ────────────►│
  │   Cookie: username=Kiran      │
  │                               │
  │◄── Response: user dashboard ──│
  │                               │

Every single request carries the cookie.
localStorage data is NEVER automatically sent to the server.

When to Use Each Storage Type

Security Notes

• Never store sensitive data like passwords or payment details in localStorage or sessionStorage — JavaScript on the same page can read them.
• Use HttpOnly cookies for authentication tokens — they are invisible to JavaScript and safer against cross-site scripting.
• localStorage and sessionStorage are accessible by any script running on the same origin.

Checking Storage Availability

function storageAvailable(type) {
  try {
    let storage = window[type];
    storage.setItem("__test__", "1");
    storage.removeItem("__test__");
    return true;
  } catch (e) {
    return false;
  }
}

if (storageAvailable("localStorage")) {
  localStorage.setItem("key", "value");
}

Summary

localStorage stores data permanently until removed, making it right for preferences and offline data. sessionStorage stores data only for the current tab session, making it right for temporary form data and wizard steps. Cookies are small, expire on a set date, and travel to the server with every request — making them the standard for authentication. Always store only what you need, avoid sensitive data in browser storage, and pick the type that matches your data's required lifetime.