Session Storage

sessionStorage provides temporary key-value storage that persists for the browser tab session.

Basic Operations

// Set item
sessionStorage.setItem('tempSearch', 'javascript');
sessionStorage.setItem('formDraft', JSON.stringify(formData));

// Get item
const search = sessionStorage.getItem('tempSearch');
const draft = JSON.parse(sessionStorage.getItem('formDraft'));

// Remove item
sessionStorage.removeItem('tempSearch');

// Clear all
sessionStorage.clear();

// Get length
const count = sessionStorage.length;

// Get key by index
const key = sessionStorage.key(0);

Key Differences from localStorage

Feature	sessionStorage	localStorage
Lifetime	Tab/window session	Until manually cleared
Scope	Same tab only	All tabs (same origin)
Storage	Per-tab	Per-origin
Clear on close	Yes	No

Tab Isolation

// Tab 1
sessionStorage.setItem('user', 'Alice');

// Tab 2 (different tab, same origin)
sessionStorage.getItem('user');  // null (isolated!)

// Tab 1 only sees its own data
// Tab 2 has its own separate storage

Common Use Cases

// Multi-step form wizard
const step1Data = { name: 'Alice', email: 'alice@example.com' };
sessionStorage.setItem('wizard-step1', JSON.stringify(step1Data));

// Temporary search/filter state
sessionStorage.setItem('searchQuery', 'javascript tutorials');
sessionStorage.setItem('filterCategory', 'beginner');

// Modal/form state (don't persist after close)
sessionStorage.setItem('modalOpen', 'true');
sessionStorage.setItem('formDirty', 'true');

// Checkout flow
sessionStorage.setItem('cart', JSON.stringify(items));
sessionStorage.setItem('shippingMethod', 'express');

Navigation State

// Remember scroll position
defaults: {
  window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('scrollPos', window.scrollY);
  });

  window.addEventListener('load', () => {
    const scrollPos = sessionStorage.getItem('scrollPos');
    if (scrollPos) window.scrollTo(0, parseInt(scrollPos));
  });
}

Choosing between sessionStorage and localStorage depends on your data's lifetime needs.

Comparison

Aspect	sessionStorage	localStorage
Lifetime	Tab session	Until cleared
Scope	Current tab only	All tabs
Clear method	Close tab	Manual clear
Use case	Temporary data	Persistent preferences
Security	Slightly better	Same (client-side)

Decision Guide

Need data to persist after tab close?
├── Yes → Use localStorage
└── No → Use sessionStorage

Need data shared across tabs?
├── Yes → Use localStorage
└── No → Use sessionStorage

Is data sensitive?
├── Yes → Neither (use server sessions)
└── No → Choose based on lifetime

Is data temporary for current task?
├── Yes → Use sessionStorage
└── No → Use localStorage

Implementation Patterns

// Pattern 1: Form wizard (temporary)
class FormWizard {
  constructor() {
    this.currentStep = parseInt(sessionStorage.getItem('wizard-step') || '0');
  }

  saveStep(data) {
    sessionStorage.setItem(`wizard-data-${this.currentStep}`, JSON.stringify(data));
  }

  getStepData(step) {
    return JSON.parse(sessionStorage.getItem(`wizard-data-${step}`) || '{}');
  }

  complete() {
    sessionStorage.clear();
  }
}

// Pattern 2: User preferences (persistent)
const preferences = {
  get(key, defaultVal = null) {
    return JSON.parse(localStorage.getItem(key)) || defaultVal;
  },
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  }
};

// Pattern 3: Hybrid approach
const store = {
  // Persistent settings
  getSetting(key) {
    return localStorage.getItem(key);
  },
  setSetting(key, value) {
    localStorage.setItem(key, value);
  },

  // Temporary state
  getState(key) {
    return sessionStorage.getItem(key);
  },
  setState(key, value) {
    sessionStorage.setItem(key, value);
  }
};

Storage Event Limitation

// sessionStorage does NOT fire storage event across tabs
// (unlike localStorage)

// Must use custom events for same-tab communication
const event = new CustomEvent('sessionStorageChange', {
  detail: { key: 'user', value: 'Alice' }
});
window.dispatchEvent(event);

window.addEventListener('sessionStorageChange', (e) => {
  console.log('Changed:', e.detail);
});