JavaScript lesson · 21 min

JavaScript sessionStorage

Store short-lived tab data and understand how sessionStorage differs from localStorage.

Code runs locally in your browser

What you will practice

Save temporary tab state.
Read session-only values.
Choose between sessionStorage and localStorage.

What this means

`sessionStorage` is similar to localStorage, but it is meant for data that belongs to the current browser tab session.

It is useful for temporary state that should not become a long-term preference.

Like localStorage, sessionStorage stores strings, so structured data still needs JSON.

If this is your first time seeing this

sessionStorage is for short-lived browser state.

Use it when the data belongs to the current tab task, not to the user's long-term preferences.

Mini glossary

sessionStorage: Browser storage for temporary tab/session values.
Session: The current browsing context or tab lifetime.
Temporary state: Data useful right now but not meant to be permanent.

Example from everyday life

sessionStorage is like a sticky note you keep only while working at one desk. It helps during the current task, but you do not treat it as a permanent record.

How it works step by step

The example saves the current checkout step as a string.
It saves a small draft object by converting it to JSON.
The code reads both values back.
The output shows why sessionStorage is useful for temporary in-progress UI state.

Where you will use this

Remembering the current step of a multi-step form.
Keeping a temporary filter while a tab is open.
Saving short-lived draft state during one browsing session.

Before you run the code

Use sessionStorage when the data is useful during the current tab session but should not feel permanent.

The same privacy rule applies: do not put secrets or sensitive data in browser storage.

Common beginner mistakes

Using sessionStorage when the user expects the setting to be remembered later.
Using localStorage for data that should disappear after the tab task.
Forgetting that stored values are strings.

JavaScript editor

sessionStorage.setItem("checkout-step", "shipping");

const draft = {
  email: "student@lumio.pw",
  wantsUpdates: true
};

sessionStorage.setItem("signup-draft", JSON.stringify(draft));

const step = sessionStorage.getItem("checkout-step");
const savedDraft = JSON.parse(sessionStorage.getItem("signup-draft"));

console.log(`Current step: ${step}`);
console.log(`Draft email: ${savedDraft.email}`);

Console output

Run the code to see console output here.

Exercise checks0 of 2 checks passed.

WaitingReads temporary step state

WaitingReads JSON draft data

Code runs locally in an isolated sandboxed browser frame with a timeout. It is not sent to Lumio analytics or executed on the server.

Try changing this next

Change the checkout step to `payment`.
Add another draft field.
Use `sessionStorage.clear()` and check what becomes unavailable.

Previous lesson Next lesson