What Is the Difference Between localStorage and sessionStorage?
Learn the difference between localStorage and sessionStorage in JavaScript, their lifetimes, scope per tab, and when to use each Web Storage API.
Expected Interview Answer
localStorage persists key-value data in the browser indefinitely until explicitly cleared, while sessionStorage stores data only for the lifetime of a single browser tab and clears automatically when that tab is closed.
Both are synchronous, string-only Web Storage APIs scoped to a page's origin, sharing the same get/set/remove interface, but their lifetimes differ sharply: localStorage survives browser restarts and is shared across all tabs of the same origin, while sessionStorage is isolated per tab, so opening the same site in two tabs gives each its own separate sessionStorage. Choosing between them depends on whether data should outlive the current tab session.
- localStorage is ideal for persistent user preferences
- sessionStorage isolates data per tab, avoiding cross-tab leakage
- Both share a simple, synchronous key-value API
- Both scope data to the page's origin for basic isolation
- Neither requires server round-trips like cookies for reads
AI Mentor Explanation
localStorage is like a franchise's permanent player registry that stays on file across every season until someone deliberately deletes an entry. sessionStorage is like a single match's team sheet handed out just for that game — the moment the match ends and everyone leaves the ground, that particular sheet is discarded, even though the permanent registry remains untouched.
Step-by-Step Explanation
Step 1
Same basic API
Both use setItem, getItem, removeItem, and clear with string keys and values.
Step 2
localStorage persists
Data set in localStorage survives page reloads, tab closures, and browser restarts.
Step 3
sessionStorage is per-tab
Data is scoped to a single tab and cleared automatically when that tab closes.
Step 4
Origin scoping
Both are scoped to the page's origin, so different sites can't read each other's storage.
Step 5
Choose based on lifetime
Use localStorage for durable preferences, sessionStorage for transient, tab-specific state.
What Interviewer Expects
- States localStorage persists indefinitely, sessionStorage per tab
- Knows both share the same synchronous API
- Explains sessionStorage is isolated per tab, not shared across tabs
- Understands both are scoped to the page's origin
- Can give a real use case for each
Common Mistakes
- Assuming sessionStorage is shared across multiple open tabs
- Thinking localStorage expires automatically like cookies with a max-age
- Storing sensitive data in either without considering XSS risk
- Confusing Web Storage with cookies, which are sent with every request
Best Answer (HR Friendly)
“localStorage saves data in the browser permanently until it's manually cleared, while sessionStorage only keeps data for as long as one browser tab stays open, so localStorage suits saved preferences and sessionStorage suits temporary, per-tab information.”
Code Example
// Persists across tabs and browser restarts
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme')); // 'dark'
// Cleared when this tab closes
sessionStorage.setItem('draftId', 'abc123');
console.log(sessionStorage.getItem('draftId')); // 'abc123'Follow-up Questions
- How does Web Storage differ from cookies in terms of size and transmission?
- How would you securely store a session token in the browser?
- Does sessionStorage survive a page refresh in the same tab?
- How can you listen for storage changes across tabs with the 'storage' event?
- What are the security risks of storing sensitive data in localStorage?
MCQ Practice
1. When is sessionStorage data cleared?
sessionStorage data is cleared automatically when the browser tab it belongs to is closed.
2. Is localStorage shared across multiple tabs of the same origin?
localStorage is shared across all tabs and windows of the same origin, unlike sessionStorage.
3. What type of data can localStorage and sessionStorage store?
Both APIs store only strings; objects must be serialized, typically with JSON.stringify, before storing.
Flash Cards
How long does localStorage persist? — Indefinitely, until explicitly cleared.
How long does sessionStorage persist? — Until the specific browser tab is closed.
Is sessionStorage shared across tabs? — No, each tab has its own isolated sessionStorage.
What data types can both APIs store? — Only strings; objects must be JSON-serialized first.