Compile Ready
Module 12 · Browser APIs

sessionStorage

Beginner8m read5m practice13m total
StoragesessionStorageTabsBrowser

Introduction

sessionStorage is a browser key-value store like localStorage, but its lifetime is tied to a page session, usually a single tab. It survives reloads in that tab, but it is cleared when the tab or browsing context ends.

It is useful for temporary UI state: wizard progress, unsent form drafts, one-tab filters, and values that should not persist forever.

Why This Matters

Interviewers use sessionStorage to see whether you understand browser storage scope, not just API names. The key distinction is that sessionStorage is tab-scoped while localStorage is longer-lived and shared across same-origin tabs.

Theory

Core behavior

sessionStorage uses the same Storage API shape as localStorage: setItem, getItem, removeItem, clear, key, and length. Values are strings and objects require JSON serialization.

The difference is lifetime and scope. sessionStorage is scoped to both origin and the top-level browsing context. In practical terms, same-origin pages in the same tab can share it, but another tab gets a separate session store.

Good use cases

  • Multi-step form state that should survive refresh but not tomorrow.
  • Temporary filters or sort order in one tab.
  • Return-to-page UI state for a workflow.
  • Per-tab experiment state.

What not to use it for

Do not use sessionStorage for server authority or sensitive secrets. It is still readable by JavaScript, so XSS can read it. It is also client-controlled and can be edited by the user.

localStorage vs sessionStorage vs cookies

FeaturelocalStoragesessionStorageCookies
LifetimePersistent until clearedCurrent tab/sessionConfigured expiry or browser session
Shared across same-origin tabsYesNo, generally per tabYes when domain/path match
Sent to serverNoNoYes
Value typeStringStringString
Main usePreferences and durable client stateTemporary per-tab UI stateServer/session metadata

Some browsers copy sessionStorage when a tab is duplicated, then separate the copies afterward. Do not build security assumptions on duplication behavior.

Visual Diagrams

Tab-scoped storage
Tab A on same origin
  sessionStorage: draft step 2

Tab B on same origin
  sessionStorage: separate draft

Reload Tab A
  draft is still there

Close Tab A
  draft is cleared

The page session, not the whole browser profile, is the key lifetime boundary.

Code Examples

Save a form draft for the current tab

A reload keeps the draft, but closing the tab clears it.

Loading…

Clear temporary state after completion

Remove tab-scoped data when the workflow succeeds so stale state does not reappear on reload.

Loading…

Coding Exercises

Choose the right browser store

Easy

Implement chooseStore(requirement) for three requirement strings: persistent preference, per-tab draft, and sent to server. Return localStorage, sessionStorage, or cookie.

Interview Questions

1How is `sessionStorage` different from `localStorage`?

Both are synchronous, origin-scoped, string-only Storage APIs. localStorage persists until cleared and is shared across same-origin tabs. sessionStorage is tied to a page session, usually one tab, and is cleared when that tab or context ends.

Asked at:MicrosoftGoogleAmazon
2Name a good use case for `sessionStorage`.

A multi-step form draft or wizard state that should survive refresh but not persist across future browser sessions is a good fit. It is temporary, per-tab UI state, not server authority or a secret store.

Asked at:MetaApple

Quiz

1. Which statement best describes `sessionStorage`?

2. What happens to typical `sessionStorage` data after a reload in the same tab?

Summary

  • `sessionStorage` has the same string-based API shape as `localStorage`.
  • Its lifetime is tied to the page session, usually a single tab.
  • Use it for temporary per-tab UI state such as drafts and wizard progress.
  • It is still readable by JavaScript and should not hold sensitive secrets.

Cheat Sheet

API: setItem, getItem, removeItem, clear.

Lifetime: survives reload, cleared when the page session ends.

Scope: origin plus tab/page session.

Values: strings only; use JSON for objects.

Best use: temporary per-tab UI state.

Not for: secrets, permissions, or server authority.