Stop 01 · Internet & Web BasicsTopics · 10/14

SessionStorage

In short

sessionStorage is localStorage's short-memory cousin. It's perfect for things that should last only while one tab is open, like a multi-step form.

Like LocalStorage but scoped to a single browser tab and cleared when that tab closes — useful for temporary, per-tab state. Its tab-level lifetime makes it useful for temporary workflows, multi-step forms, and state that should not automatically follow the user into another tab.

The jaadu wipes an exam hall whiteboard clean.

Think of it like this

A whiteboard in the exam hall

You can use it during your exam, but it's wiped once you leave the room. And the student in the next room has their own board.

Watch it happen

localStorage or sessionStorage?

localStorage

Stays after the browser closes
Shared by every tab of the site
Good for theme, language, filters

sessionStorage

Cleared when the tab closes
Each tab gets its own copy
Good for form progress in one visit

Ask one question: should this survive closing the tab? Yes, use localStorage. No, use sessionStorage.

The big ideas

What you need to know

Same API as localStorage

setItem, getItem, removeItem and clear all work exactly the same way.

Gone when the tab closes

Data survives a reload but disappears when that tab or window is closed.

One tab, one box

Two tabs of the same site get separate sessionStorage, so they don't overwrite each other.

Good for temporary state

Use it for form progress, a one-time message or scroll position during a single visit.

See it in code

Walk through the code

1// Save progress of a 3-step form2sessionStorage.setItem("signupStep", "2");3 4// On reload, continue from the same step5const step = Number(sessionStorage.getItem("signupStep") ?? 1);6 7// Done? Clean up8sessionStorage.removeItem("signupStep");

1/3Save which step of the form the user is on.

A reload keeps the user on step 2. Closing the tab starts them fresh, which is usually what you want for a sign-up form.

Save yourself the pain

Common mistakes

Oops

Expecting sessionStorage data to show up in a new tab.

Do this instead

Each tab has its own copy. Use localStorage if data must be shared across tabs.

Oops

Thinking it's safer for secrets than localStorage.

Do this instead

Scripts can read both. Neither is the place for tokens or passwords.

Your mission

Spot the difference

~10 min

Quick check

A user fills step 1 of a form, then opens the same site in a brand-new tab. Where is their step 1 data?

Go deeper

1Compare sessionStorage vs localStorage side by side in DevTools. Write down when you would choose each option and what trade-off drives that choice.
2Try storing form draft data in sessionStorage to survive a page refresh. Inspect the result in DevTools or the console and explain what you observed.
3Understand it doesn't persist across tabs, unlike localStorage.