Lesson

HTML Session Storage

Q: What happens when a user duplicates a tab?

Modern browsers copy the original tab's sessionStorage into the duplicated tab as an independent snapshot, and edits afterward stay separate.

10 min reading

Free Course

HTML Session Storage: Temporary Per-Tab Browser State

sessionStorage works almost identically to localStorage, except its data lasts only for the lifetime of a single browser tab. Closing that tab deletes all stored keys immediately, while refreshing the same tab preserves the saved data.

When sessionStorage Beats localStorage

Each open browser tab—even two tabs pointing to the exact same URL—receives its own isolated sessionStorage container. This isolation makes sessionStorage ideal for temporary multi-step checkout wizards, unsaved form drafts, or one-time banner dismissals during a single visit.

If you stored wizard step data in localStorage instead, opening a second tab to compare products would overwrite the first tab's state.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Session Storage Demo</title>
</head>
<body style="font-family: system-ui, sans-serif; padding: 20px;">
    <label for="draft-note">Tab Draft Note (survives refresh, clears on tab close):</label><br>
    <textarea id="draft-note" rows="4" cols="40" placeholder="Type a temporary note..."></textarea>
    <p id="tab-info"></p>

    <script>
        const box = document.getElementById('draft-note');
        const info = document.getElementById('tab-info');

        box.value = sessionStorage.getItem('tab_draft') || '';
        box.addEventListener('input', () => {
            sessionStorage.setItem('tab_draft', box.value);
            info.textContent = `Draft saved in this tab (${box.value.length} chars).`;
        });
    </script>
</body>
</html>

API Methods and Limits

sessionStorage shares the exact same methods as localStorage: setItem(), getItem(), removeItem(), and clear(). It holds roughly 5 MB of string data per origin per tab, and shares the same rule against saving confidential secrets.

Common Mistakes to Avoid

Expecting sessionStorage to sync across two open tabs: Unlike localStorage (which fires storage events across tabs), sessionStorage stays strictly inside one tab.
Forgetting to serialize objects with JSON.stringify(): Non-string values convert via .toString(), turning objects into "[object Object]".
Storing user authentication sessions carelessly: True authentication tokens normally belong in HttpOnly server cookies, not JavaScript-accessible Web Storage.