SessionStorage0%
Practical Use Cases

SessionStorage

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

SessionStorage in Modern JavaScript

The sessionStorage object is a companion to localStorage within the Web Storage API. While it shares an identical method interface (setItem, getItem, removeItem, clear), its lifecycle and scoping rules are strictly bounded by the browser tab session.

1. Key Differences: sessionStorage vs. localStorage

FeaturesessionStoragelocalStorage
Data LifetimeCleared immediately when the browser tab/window is closedPersists indefinitely until explicitly deleted
Scope BoundaryScoped strictly to the specific browser tab and originShared across all tabs, windows, and iframes of same origin
New Tab BehaviorOpening a new tab creates a fresh, empty sessionNew tab accesses identical existing data
CapacityTypically 5MB per originTypically 5MB–10MB per origin
Storage APIsetItem, getItem, removeItem, clearsetItem, getItem, removeItem, clear
Output
User opens Tab 1 (Origin: mysite.com) ──► sessionStorage [A: 1]
User opens Tab 2 (Origin: mysite.com) ──► sessionStorage [EMPTY!] (Independent session!)
Both Tab 1 and Tab 2 share ──────────► localStorage [Persistent Data]

2. API Usage

The syntax for sessionStorage is identical to localStorage:

JavaScript
// Store temporary wizard step state
sessionStorage.setItem('currentStep', '3');
sessionStorage.setItem('tempFormData', JSON.stringify({ name: 'Alex', plan: 'pro' }));
 
// Read session data
const step = sessionStorage.getItem('currentStep'); // '3'
const formData = JSON.parse(sessionStorage.getItem('tempFormData'));
 
// Delete single item
sessionStorage.removeItem('currentStep');
 
// Clear all items in current tab's session
sessionStorage.clear();

3. Ideal Use Cases for sessionStorage

  1. 1
    Multi-Step Checkout / Registration Wizards: Preserves filled fields across page navigation within the same tab, but resets if the user abandons the tab.
  2. 2
    Single-Tab Data Isolation: Banking portals or sensitive financial dashboards where multiple tabs must not share state.
  3. 3
    Scroll Position Recovery: Storing scroll offset before navigating to an article to return to the exact reading spot when clicking "Back".
  4. 4
    Temporary Session Tokens: Tokens that should expire immediately upon closing the active window.

4. Gotcha: Page Refresh vs. Tab Close

  • Page Refresh (F5 / Reload): sessionStorage survives normal page refreshes and page restorations!
  • Tab Close: Closing the tab terminates the session and wipes all data completely.
  • Duplicate Tab: Duplicating a tab (Ctrl + click on tab) copies the current session storage snapshot into the new tab, but from that point forward they are completely isolated.
Interactive Quiz

Practice Quiz

Question 1
When is data stored in sessionStorage automatically deleted?
Question 2
If a user opens the same URL in two separate browser tabs, do they share the same sessionStorage?
Question 3
Does refreshing a page (pressing F5) wipe sessionStorage?
Question 4
Which storage mechanism is best suited for a multi-step checkout form that should not leak to other tabs?
Question 5
What is the typical storage capacity of sessionStorage in modern browsers?
Next Lesson

Practical Use Cases

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
LocalStoragePractical Use Cases

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext