JavaScript Notes

JavaScript sessionStorage - Complete Guide to Session-Based Web Storage

Master JavaScript sessionStorage for tab-scoped browser storage. Learn setItem, getItem, JSON storage, tab isolation, multi-step form persistence, and key differences from localStorage with examples.

What is sessionStorage?

sessionStorage stores data for the duration of a single browser tab session. The moment the user closes the tab (not just the page — the entire tab), all data is gone. Opening the same URL in a new tab creates a completely separate storage.

Example

sessionStorage Scope: ═══════════════════════════════════════════════════════════════════ Browser Window ├── Tab 1 (example.com/checkout) │ └── sessionStorage │ ├── "step" → "3" │ └── "formData" → '{"name":"Rahul"}' │ ├── Tab 2 (example.com/checkout) ← NEW TAB — SEPARATE storage! │ └── sessionStorage │ └── (EMPTY — completely isolated from Tab 1) │ └── Tab 3 (other-site.com) └── sessionStorage ← Different origin └── (completely separate) ✅ Data lives for: lifetime of the TAB ❌ Data dies when: tab is CLOSED ❌ NOT shared between tabs (even same URL!) ═══════════════════════════════════════════════════════════════════

Storing Objects and Arrays

Just like localStorage, sessionStorage requires JSON serialization:

Example

// Store multi-step form data const step1Data = { fullName: 'Rahul Sharma', email: 'rahul@example.com', phone: '+91-98765-43210' }; sessionStorage.setItem('registrationStep1', JSON.stringify(step1Data)); const step2Data = { address: '42 MG Road, Bengaluru', city: 'Bengaluru', pincode: '560001' }; sessionStorage.setItem('registrationStep2', JSON.stringify(step2Data)); // Retrieve on later step (step 3 — review page) const savedStep1 = JSON.parse(sessionStorage.getItem('registrationStep1') || '{}'); const savedStep2 = JSON.parse(sessionStorage.getItem('registrationStep2') || '{}'); console.log(savedStep1.fullName); // "Rahul Sharma" console.log(savedStep2.city); // "Bengaluru" // Merge for final submission const finalData = { ...savedStep1, ...savedStep2 }; console.log(finalData);

Output

"Rahul Sharma"
"Bengaluru"
{ fullName: "Rahul Sharma", email: "rahul@example.com", phone: "...", address: "...", city: "Bengaluru", pincode: "560001" }

Real World Use Case: Multi-Step Form Wizard

Example

// Step 1 page: Save data and move to step 2 function saveStep1AndContinue() { const name = document.getElementById('full-name').value; const email = document.getElementById('email').value; if (!name || !email) { alert('Please fill all fields'); return; } sessionStorage.setItem('step1', JSON.stringify({ name, email })); console.log('Step 1 saved to sessionStorage'); // Go to step 2 window.location.href = '/register/step-2'; } // Step 2 page: Auto-fill recap and save step 2 function initStep2() { // Show data from step 1 as confirmation const step1 = JSON.parse(sessionStorage.getItem('step1') || '{}'); if (!step1.name) { // User came directly to step 2 without step 1 window.location.href = '/register/step-1'; return; } document.getElementById('recap-name').textContent = step1.name; document.getElementById('recap-email').textContent = step1.email; console.log(`Welcome back, ${step1.name}! Continue from step 2.`); } // Final submission: Collect all steps and submit function submitRegistration() { const step1 = JSON.parse(sessionStorage.getItem('step1') || '{}'); const step2 = JSON.parse(sessionStorage.getItem('step2') || '{}'); const finalPayload = { ...step1, ...step2 }; console.log('Submitting:', finalPayload); // On success, clear session storage sessionStorage.clear(); window.location.href = '/register/success'; }

Tab Isolation Demo

This is the most important behavior of sessionStorage:

js example

// In Tab 1:
sessionStorage.setItem('tabName', 'Tab 1');
console.log(sessionStorage.getItem('tabName')); // "Tab 1"

// In Tab 2 (same URL, opened separately):
console.log(sessionStorage.getItem('tabName')); // null — completely isolated!
sessionStorage.setItem('tabName', 'Tab 2');

// Tab 1 is completely unaffected by Tab 2's changes
// (Unlike localStorage which IS shared between tabs)

Output

// Tab 1:
"Tab 1"

// Tab 2:
null

Common Mistakes

❌ Mistake 1: Expecting sessionStorage to persist after tab close

js example

// ❌ Wrong expectation
sessionStorage.setItem('userPref', 'dark');
// User closes tab and reopens the URL...
console.log(sessionStorage.getItem('userPref')); // null! Gone.

// ✅ Use localStorage for persistent preferences
localStorage.setItem('userPref', 'dark');
// Survives tab closes and browser restarts

❌ Mistake 2: Expecting data to be shared between tabs

js example

// Tab 1 sets data
sessionStorage.setItem('shared', 'hello');

// ❌ Wrong: Tab 2 expects to see Tab 1's data
console.log(sessionStorage.getItem('shared')); // null! Tabs are isolated.

// ✅ Use localStorage for cross-tab data sharing
localStorage.setItem('shared', 'hello'); // Accessible from all tabs

❌ Mistake 3: Not handling missing session data on page refresh

Example

// ❌ Fragile — assumes data is always there const step1 = JSON.parse(sessionStorage.getItem('step1')); document.getElementById('name').value = step1.name; // TypeError if null! // ✅ Safe — provide fallback and guard const step1 = JSON.parse(sessionStorage.getItem('step1') || '{}'); if (step1.name) { document.getElementById('name').value = step1.name; }

Interview Questions

Q1. What is sessionStorage and how does it differ from localStorage? > Both are Web Storage APIs with the same interface. The key difference: localStorage persists forever (until cleared), while sessionStorage only lasts for the duration of the browser tab. sessionStorage is also NOT shared between tabs — each tab has its own independent storage.

Q2. Does sessionStorage persist through page refreshes? > Yes! A page refresh (F5 or navigation within the same tab) keeps sessionStorage data intact. Only closing the tab destroys the data. This makes it perfect for multi-page form wizards within a single user session.

Q3. What happens to sessionStorage when you duplicate a tab? > When you duplicate a tab (Ctrl+D or right-click → Duplicate), the new tab inherits a copy of the original tab's sessionStorage at that moment. After that, they're independent — changes in one don't affect the other.

Q4. Can two tabs on the same website share sessionStorage? > No. sessionStorage is tab-isolated. Each tab has its own independent sessionStorage. Use localStorage for cross-tab data sharing, or the BroadcastChannel API for real-time cross-tab messaging.

Q5. What is sessionStorage useful for in real applications? > Multi-step form wizards (store intermediate data between steps), temporary search filters within a session, unsaved draft data, shopping cart data for a single checkout flow, and preventing data loss on page refresh within the same tab.

Q6. What storage limit does sessionStorage have? > Typically ~5MB per origin, same as localStorage. It varies slightly between browsers. Use it for small data like form state, not large files or datasets.

Key Takeaways

text example

✅ sessionStorage data lives only for the current TAB's lifetime
✅ Closing the tab destroys all sessionStorage data permanently
✅ Page refresh keeps sessionStorage data — it ONLY dies on tab close
✅ Tab-isolated — two tabs with same URL have SEPARATE sessionStorage
✅ Same API as localStorage: setItem, getItem, removeItem, clear
✅ Strings only — use JSON.stringify/parse for objects
✅ Perfect for multi-step forms and temporary session state
✅ Use localStorage when you need data to persist across tabs/sessions

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript sessionStorage - Complete Guide to Session-Based Web Storage.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, dom, session, storage

Continue learning this concept

DOM ManipulationJavaScript localStorage - Complete Guide to Web Storage APIMaster JavaScript localStorage for persistent browser storage. Learn setItem, getItem, removeItem, clear, storing objects with JSON, storage events, and real-world use cases like dark mode and cart persistence.DOM ManipulationJavaScript DOM Changing Content - textContent, innerHTML, setAttribute Complete GuideLearn how to change text, HTML, and attributes of DOM elements using JavaScript. Master textContent vs innerHTML vs innerText, setAttribute, dataset, classList with real-world examples and XSS prevention.DOM ManipulationJavaScript DOM Changing Styles - CSS Manipulation, classList & getComputedStyleLearn to dynamically change CSS styles with JavaScript. Master inline styles, classList, getComputedStyle, CSS variables, dark mode toggle, and animations with practical examples and performance tips.DOM ManipulationJavaScript DOM Creating Elements - createElement, appendChild, DocumentFragment GuideMaster all methods to dynamically create and insert DOM elements in JavaScript. Learn createElement, append vs appendChild, insertBefore, cloneNode, DocumentFragment, and insertAdjacentHTML with real examples.DOM ManipulationJavaScript DOM Introduction - Complete Guide to Document Object ModelMaster the JavaScript DOM (Document Object Model) from scratch. Learn DOM tree structure, node types, window vs document, and how JS manipulates web pages. What is DOM in JavaScript — explained simply.DOM ManipulationJavaScript DOM Traversal - Navigate Parent, Child & Sibling NodesMaster DOM traversal in JavaScript. Learn parentNode, children, firstElementChild, nextElementSibling, closest(), and more to navigate the DOM tree efficiently with real examples.

PreviousJavaScript DOM Selecting Elements - querySelector, getElementById Complete Guide NextJavaScript Click Event - addEventListener, Event Handler Complete Guide