HTML Session Storage

Introduction

Session Storage is part of the Web Storage API. It lets you save simple key-value data in the browser for as long as the current tab stays open. Unlike localStorage, which persists across browser restarts, sessionStorage is cleared when the user closes the tab.

Use it for temporary state: wizard steps, form drafts, filters on a listing page, or anything you do not need to share with other tabs. This tutorial covers the API, comparisons with other storage options, and plain HTML Try It demos.

What You’ll Learn

What Is Session Storage?

Session Storage is a browser mechanism for storing key-value pairs as strings. Each key maps to one value for the lifetime of the page session in that tab.

A page session:

• Starts when you open a tab and visit a page.
• Survives reloads and back/forward navigation in the same tab.
• Ends when the tab or browser window is closed.
• Is isolated — other tabs have their own separate sessionStorage.

How Does Session Storage Work?

Browsers expose a global sessionStorage object in JavaScript. It behaves like a simple dictionary:

• Keys and values are always strings.
• Storage is synchronous — reads and writes block the main thread briefly (fine for small data).
• Access is limited to pages from the same origin in that tab.
• It is not sent to the server automatically (unlike cookies).

For large structured data or offline databases, use IndexedDB instead. For tiny strings that must persist forever across visits, use localStorage.

Using Session Storage

The sessionStorage object provides four essential methods:

• sessionStorage.setItem(key, value) — stores a string under key.
• sessionStorage.getItem(key) — returns the string or null if missing.
• sessionStorage.removeItem(key) — deletes one entry.
• sessionStorage.clear() — removes every key in this tab.

You can also use bracket syntax: sessionStorage['theme'] = 'dark' (still stores strings only).

Helpful properties:

• sessionStorage.length — number of keys.
• sessionStorage.key(index) — name of the key at position index.

Storing and Retrieving Data

// Storing data
sessionStorage.setItem('username', 'JohnDoe');

// Retrieving data
var username = sessionStorage.getItem('username');
console.log(username); // JohnDoe

// Missing key returns null
console.log(sessionStorage.getItem('missing')); // null

Storing objects (JSON)

var user = { name: 'Jane', score: 42 };

sessionStorage.setItem('user', JSON.stringify(user));

var saved = JSON.parse(sessionStorage.getItem('user'));
console.log(saved.name); // Jane

Removing Data

Delete one key or wipe the entire session store for the tab:

// Remove one key
sessionStorage.removeItem('username');

// Remove everything in this tab's sessionStorage
sessionStorage.clear();

Call removeItem when a user logs out of a single-page flow. Call clear sparingly—it deletes all keys your app stored in that tab.

Session Storage vs localStorage

Common Pitfalls

1. Data persistence — sessionStorage is not permanent. Closing the tab deletes everything. Do not rely on it for long-term preferences.
2. Storage limit — roughly 5 MB per origin. Very large strings can throw QuotaExceededError.
3. Cross-tab communication — each tab has its own store. Use localStorage plus the storage event, or BroadcastChannel, to sync across tabs.
4. Strings only — numbers become strings ("42"). Objects need JSON.stringify.
5. Not for secrets — any script on your page can read sessionStorage. Never store passwords or API keys here.
6. Private browsing — some browsers use in-memory storage that clears when the private session ends.

Examples Gallery

Five short examples from basic save/read to a full HTML page. Try It Yourself demos use plain HTML with no CSS so you can focus on the API.

sessionStorage.setItem('username', 'JohnDoe');
var name = sessionStorage.getItem('username');
console.log(name); // JohnDoe

JohnDoe

var cart = { items: 2, total: 19.99 };
sessionStorage.setItem('cart', JSON.stringify(cart));

var loaded = JSON.parse(sessionStorage.getItem('cart'));
console.log(loaded.total); // 19.99

19.99

sessionStorage.setItem('temp', 'draft');
sessionStorage.removeItem('temp');
console.log(sessionStorage.getItem('temp')); // null

null

for (var i = 0; i < sessionStorage.length; i++) {
  var key = sessionStorage.key(i);
  console.log(key, sessionStorage.getItem(key));
}

theme dark
step 2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Session Storage Example</title>
</head>
<body>
  <h1>Session Storage Example</h1>
  <input type="text" id="input" placeholder="Enter your name">
  <button id="save">Save</button>
  <button id="load">Load</button>
  <p id="result"></p>

  <script>
    document.getElementById('save').onclick = function () {
      sessionStorage.setItem('userName', document.getElementById('input').value);
    };

    document.getElementById('load').onclick = function () {
      var userName = sessionStorage.getItem('userName');
      document.getElementById('result').textContent =
        userName ? 'Hello, ' + userName : 'No name saved';
    };
  </script>
</body>
</html>

Hello, Alex

🚀 Common Use Cases

• Multi-step forms — remember wizard step or partial answers.
• Tab-specific filters — sort order that should not affect other tabs.
• SPA navigation state — scroll position or panel selection until tab closes.
• Shopping session — temporary cart before checkout (not long-term).
• A/B test bucket — keep user in same variant for this visit.
• Debug flags — verbose logging toggle for current session only.

📝 Notes

• sessionStorage is not a replacement for server-side sessions or secure auth tokens.
• Values are visible in DevTools → Application → Session Storage.
• Incognito/private windows may discard storage when the session ends.
• Third-party iframes on other origins cannot read your sessionStorage.
• For cross-tab sync, use localStorage and the storage event.
• For large offline data, use IndexedDB.

💡 Best Practices