The HTML sessionStorage object allows web applications to store key-value data pairs temporarily inside a single browser tab. Data persists across page reloads within the same tab, but is automatically wiped as soon as the tab or browser window is closed.
sessionStorage uses the exact same key-value API methods as localStorage:
// Store item in sessionStorage
sessionStorage.setItem("draft_step", "2");
// Retrieve item
const step = sessionStorage.getItem("draft_step");
// Remove item
sessionStorage.removeItem("draft_step");
// Clear all tab session data
sessionStorage.clear();
Key features of sessionStorage:
flowchart LR
A["Browser Window"] --> B["Tab 1 (sessionStorage: step=2)"]
A --> C["Tab 2 (sessionStorage: Isolated & Empty)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML SessionStorage Example</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Multi-Step Form Progress</h2>
<div style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 400px;">
<p>Current Tab Session Step: <strong id="step-num" style="color: #38bdf8;">1</strong></p>
<button id="next-btn" style="background-color: #059669; color: white; padding: 8px 14px; border: none; border-radius: 4px; cursor: pointer;">
Advance Step
</button>
</div>
<script>
const display = document.getElementById("step-num");
const btn = document.getElementById("next-btn");
let currentStep = parseInt(sessionStorage.getItem("form_step") || "1");
display.textContent = currentStep;
btn.addEventListener("click", () => {
currentStep++;
sessionStorage.setItem("form_step", currentStep.toString());
display.textContent = currentStep;
});
</script>
</body>
</html>
sessionStorage for transient multi-step wizard state: Ideal for multi-step checkout forms or single-session wizard data that should not persist after tab closing.sessionStorage for cross-tab sharing: Opening a new tab opens a new isolated session environment; use localStorage if data must be shared across tabs.Write a JavaScript snippet storing a temporary session token sessionStorage.setItem("temp_key", "xyz123")!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.