Does sessionStorage survive page refresh?

Yes! Refreshing the page (F5) keeps sessionStorage intact. It's only cleared when the tab/window is completely closed. Navigation within the same tab also preserves it.

What about browser crashes?

Most browsers restore sessionStorage when recovering crashed tabs (they save it to disk periodically). But don't rely on this for critical data — it's an implementation detail.

Can I detect when sessionStorage is about to be cleared?

Not reliably. The 'beforeunload' event fires when leaving the page but you can't distinguish between a refresh (storage kept) and closing the tab (storage cleared). Use it to save state, not to detect clearing.

Is sessionStorage more secure than localStorage?

Slightly — it's not shared across tabs and clears on close, so the attack window is smaller. But it's still accessible to any JavaScript on the page. Never store secrets in either.

JavaScript Session Storage

Like localStorage, but temporary. Data disappears when the tab closes.

Module 8 · DOM & Browser

The Document Object Model is how JavaScript reads and changes web pages. Selecting elements, modifying content, handling events, validating forms, and persisting data in storage are the core skills of frontend development.

Learn Session Storage in JavaScript — covering How It Works, vs localStorage, Use Cases, Tab Isolation with interactive visual examples and step-by-step explanations.

About this module

JavaScript in the browser is all about the DOM — the live tree of HTML elements your code can select, modify, and respond to. Click handlers, form validation, dynamic content updates, and local storage all build on DOM APIs.

This module takes you from querySelector to full user interaction patterns. You will learn event delegation, form handling, and how to persist state in localStorage — the skills every frontend developer uses daily.

Why this matters

Understanding session storage is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals — and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.

Key topics covered

How It Works
vs localStorage
Use Cases
Tab Isolation

Where you'll use it

Building interactive web applications with session storage
Processing and transforming data in frontend and backend code
Writing cleaner, more maintainable JavaScript modules
Debugging and reviewing code during development

How It Works

Same API as localStorage — different lifetime.

// Exact same methods as localStorage:
sessionStorage.setItem("step", "3");
sessionStorage.getItem("step");     // "3"
sessionStorage.removeItem("step");
sessionStorage.clear();
sessionStorage.length;

// Store objects the same way:
sessionStorage.setItem("cart", JSON.stringify([
  { id: 1, name: "Widget", qty: 2 },
  { id: 2, name: "Gadget", qty: 1 },
]));

const cart = JSON.parse(sessionStorage.getItem("cart"));

Lifetime:

✓ Survives page refreshes

✓ Survives navigation within the site

✗ Cleared when tab/window is closed

✗ Not shared between tabs

vs localStorage

Choose the right one for your use case.

	localStorage	sessionStorage
Persists	Forever (until cleared)	Until tab closes
Shared	All tabs (same origin)	Only this tab
Size	~5MB	~5MB
API	Identical	Identical
Use for	Preferences, settings	Temporary state, wizards

// Decision guide:
// "Should the data survive closing the browser?"
//   YES → localStorage  (theme, language, settings)
//   NO  → sessionStorage (form wizard step, scroll pos)

// "Should other tabs see this data?"
//   YES → localStorage  (cart, login state)
//   NO  → sessionStorage (current page state)

Use Cases

When sessionStorage is the right choice.

// 1. Multi-step form wizard:
// Save progress as user moves through steps
function saveStep(step, data) {
  const wizard = JSON.parse(
    sessionStorage.getItem("wizard") || "{}"
  );
  wizard[step] = data;
  wizard.currentStep = step;
  sessionStorage.setItem("wizard", JSON.stringify(wizard));
}

// On page load, restore progress:
const wizard = JSON.parse(
  sessionStorage.getItem("wizard") || "{}"
);
if (wizard.currentStep) goToStep(wizard.currentStep);

// 2. Remember scroll position:
window.addEventListener("beforeunload", () => {
  sessionStorage.setItem("scrollY", window.scrollY.toString());
});
window.addEventListener("load", () => {
  const y = sessionStorage.getItem("scrollY");
  if (y) window.scrollTo(0, Number(y));
});

// 3. Prevent duplicate form submissions:
form.addEventListener("submit", () => {
  if (sessionStorage.getItem("submitted")) {
    alert("Already submitted!");
    return;
  }
  sessionStorage.setItem("submitted", "true");
  // proceed with submission...
});

// 4. One-time welcome messages:
if (!sessionStorage.getItem("welcomeShown")) {
  showWelcomeBanner();
  sessionStorage.setItem("welcomeShown", "true");
}

Tab Isolation

Each tab gets its own sessionStorage.

// Tab A:
sessionStorage.setItem("tab", "A");

// Tab B (same URL, opened separately):
sessionStorage.getItem("tab"); // null (isolated!)
sessionStorage.setItem("tab", "B");

// Tab A still has: "A"
// Tab B has: "B"

// Exception: duplicated tabs
// If you Ctrl+click/Cmd+click a link or "Duplicate tab",
// the new tab COPIES sessionStorage from the original.
// After that, they're independent.

This isolation is a feature — it means each tab can have its own state (like which step of a wizard you're on) without interfering with other tabs.

FAQ

Common questions about session storage.

// Exact same methods as localStorage: sessionStorage.setItem("step", "3"); sessionStorage.getItem("step"); // "3" sessionStorage.removeItem("step"); sessionStorage.clear(); sessionStorage.length; // Store objects the same way: sessionStorage.setItem("cart", JSON.stringify([ { id: 1, name: "Widget", qty: 2 }, { id: 2, name: "Gadget", qty: 1 }, ])); const cart = JSON.parse(sessionStorage.getItem("cart"));

localStorage

sessionStorage

Persists

Forever (until cleared)

Until tab closes

Shared

All tabs (same origin)

Only this tab

Size

~5MB

API

Identical

Use for

Preferences, settings

Temporary state, wizards

// Decision guide: // "Should the data survive closing the browser?" // YES → localStorage (theme, language, settings) // NO → sessionStorage (form wizard step, scroll pos) // "Should other tabs see this data?" // YES → localStorage (cart, login state) // NO → sessionStorage (current page state)

// 1. Multi-step form wizard: // Save progress as user moves through steps function saveStep(step, data) { const wizard = JSON.parse( sessionStorage.getItem("wizard") || "{}" ); wizard[step] = data; wizard.currentStep = step; sessionStorage.setItem("wizard", JSON.stringify(wizard)); } // On page load, restore progress: const wizard = JSON.parse( sessionStorage.getItem("wizard") || "{}" ); if (wizard.currentStep) goToStep(wizard.currentStep);

// 2. Remember scroll position: window.addEventListener("beforeunload", () => { sessionStorage.setItem("scrollY", window.scrollY.toString()); }); window.addEventListener("load", () => { const y = sessionStorage.getItem("scrollY"); if (y) window.scrollTo(0, Number(y)); }); // 3. Prevent duplicate form submissions: form.addEventListener("submit", () => { if (sessionStorage.getItem("submitted")) { alert("Already submitted!"); return; } sessionStorage.setItem("submitted", "true"); // proceed with submission... }); // 4. One-time welcome messages: if (!sessionStorage.getItem("welcomeShown")) { showWelcomeBanner(); sessionStorage.setItem("welcomeShown", "true"); }

// Tab A: sessionStorage.setItem("tab", "A"); // Tab B (same URL, opened separately): sessionStorage.getItem("tab"); // null (isolated!) sessionStorage.setItem("tab", "B"); // Tab A still has: "A" // Tab B has: "B" // Exception: duplicated tabs // If you Ctrl+click/Cmd+click a link or "Duplicate tab", // the new tab COPIES sessionStorage from the original. // After that, they're independent.

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

How It Works

vs localStorage

Use Cases

Tab Isolation

FAQ

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

How It Works

vs localStorage

Use Cases

Tab Isolation

FAQ