Session Storage

Learning objectives#

• Use sessionStorage’s API
• Compare sessionStorage, localStorage and cookies
• Save a form draft for the current tab
• Pick the right storage for the job

Explanation#

sessionStorage has the same methods as localStorage: setItem, getItem, removeItem, clear.

Data lives only for the current tab. A reload keeps it; closing the tab deletes it. Another tab has its own separate sessionStorage.

It suits temporary state: a half-filled form, the current step of a checkout wizard, or a one-time message.

Code example: Never lose a half-written message#

1<textarea id="msg" rows="4" placeholder="Write your message…"></textarea>
2<script>
3  const box = document.querySelector('#msg');
4  box.value = sessionStorage.getItem('draft') ?? '';
5

6  box.addEventListener('input', () => sessionStorage.setItem('draft', box.value));
7

8  // after a successful send:
9  // sessionStorage.removeItem('draft');
10</script>

Reloading the tab keeps the text you typed; closing the tab clears it. (Run this on your own page — sandboxed examples have no storage.)

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. On load, any saved draft is restored.
2. Every keystroke saves the latest text.
3. After sending, the draft is removed.
4. A new tab starts with an empty sessionStorage.

Real-world use case#

Common mistakes#

Best practices#

• Use sessionStorage for temporary, per-tab state
• Clear drafts after successful submission
• Store non-sensitive data only
• Use JSON for structured data

Remember this#

Practice exercise#

1let step = Number(sessionStorage.getItem('step') ?? 1);
2function goTo(n) { step = n; sessionStorage.setItem('step', n); }

Mini quiz#

Want more? Practise all JavaScript MCQs · JavaScript interview questions

Related topics#

My notes#

Saved in this browser.