sessionStorage

JavaScriptJunior~3 min read

sessionStorage is a browser object that stores string key and value pairs only while the current tab or window is open. Put simply, it is temporary storage scoped to a single tab and a single origin; once the tab is closed the data is deleted automatically.

Theory

TL;DR

sessionStorage lives exactly as long as the tab stays open.
Every tab has its own storage, the data is not shared between tabs.
The data survives a page reload, but not closing the tab.
The API is the same as localStorage: setItem, getItem, removeItem, clear, key, length.
It stores strings only, objects must be serialized with JSON.
The quota is roughly 5 MB and access is limited to the same origin.

Quick example

javascript

// Save data
sessionStorage.setItem('user', 'Tim');

// Read data
console.log(sessionStorage.getItem('user')); // "Tim"

// Remove one entry
sessionStorage.removeItem('user');

// Clear the whole storage
sessionStorage.clear();

The difference from localStorage

Storage	Lifetime	Data shared between tabs	Cleared on close
localStorage	Permanent, until cleared manually	Yes, across tabs of one origin	No
sessionStorage	While the tab is open	No, every tab has its own	Yes

In other words, if the user opens your site in a new tab, that tab gets a fresh, empty sessionStorage.

The methods are the same as in localStorage

Method	What it does	Example
`setItem(key, value)`	Stores a value	`sessionStorage.setItem('token', 'abc')`
`getItem(key)`	Returns a value	`sessionStorage.getItem('token')`
`removeItem(key)`	Removes an entry	`sessionStorage.removeItem('token')`
`clear()`	Wipes everything	`sessionStorage.clear()`
`key(index)`	Returns the key at an index	`sessionStorage.key(0)`
`length`	Number of entries	`sessionStorage.length`

Example: form data that lives while the tab is open

javascript

<input id="name" placeholder="Name" />

<script>
  const input = document.getElementById('name');

  // Restore the value after a page reload
  input.value = sessionStorage.getItem('name') || '';

  // Save it on every change
  input.addEventListener('input', () => {
    sessionStorage.setItem('name', input.value);
  });
</script>

Now the typed name survives a page refresh, but if you close the tab and open the site again, the field is empty.

Example: data for a single authentication session

javascript

sessionStorage.setItem('sessionToken', 'abc123');

// the token survives a page reload
console.log(sessionStorage.getItem('sessionToken')); // "abc123"

// but it disappears when the tab is closed

It is used when you need to keep:

a token or sign in state only until the window is closed;
temporary data, for example form or filter state;
drafts that do not need to be persistent.

Important details and summary

It works with strings only, so for objects:

javascript
sessionStorage.setItem('user', JSON.stringify({ name: 'Tim' })); const user = JSON.parse(sessionStorage.getItem('user'));
The storage quota is roughly 5 MB.
Only the same origin and the same tab can reach the data.
You can listen to the storage event, but it does not fire in the same window, only across tabs, which is usually irrelevant for sessionStorage.

Property	`localStorage`	`sessionStorage`
Retention	Forever, until cleared	While the tab is open
Access across tabs	Yes	No
Cleared when the window closes	No	Yes
Size	About 5-10 MB	About 5 MB
Data type	Strings only	Strings only
Common use	Settings, themes, user data	Temporary sessions, forms, filters

In short: localStorage means "forever", sessionStorage means "while the tab is open".

Common mistakes

Expecting the data to be in every tab. A second tab of the same site gets its own empty storage, nothing is shared.
Confusing the browser "session" with a server session. sessionStorage has nothing to do with a server side session and is never sent to the backend.
Assuming a reload wipes the data. A page reload, and even tab restore after a browser crash, keeps the storage; it is closing the tab that clears it.
Putting an object in directly. Without JSON.stringify() you store the string "[object Object]".
Counting on the storage event in the same tab. It does not fire there, reacting to your own writes needs your own call or an application event.
Keeping valuable tokens there and calling it safe. The data is still readable by any script on the page, a shorter lifetime does not protect against XSS.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.