Skip to main content

What does sessionStorage do?

Definition

sessionStorage is a browser object that stores "key-value" pairs (strings) only while the current tab (or window) is open. Once the tab is closed, the data is automatically removed.

Put simply: it is temporary storage, available only within a single tab and domain.


1. A simple example

javascript
// Save data sessionStorage.setItem('user', 'Tim'); // Read data console.log(sessionStorage.getItem('user')); // "Tim" // Remove one item sessionStorage.removeItem('user'); // Clear the whole storage sessionStorage.clear();

2. Difference from localStorage

StorageLifetimeShared between tabsCleared on close
localStoragePermanent (until cleared manually)Yes (between tabs of the same domain)No
sessionStorageWhile the tab is openNo (each tab has its own)Yes

In other words, if a user opens your site in a new tab, they get a new, empty sessionStorage.


3. All the methods are the same as localStorage

MethodWhat it doesExample
setItem(key, value)Saves a valuesessionStorage.setItem('token', 'abc')
getItem(key)Returns a valuesessionStorage.getItem('token')
removeItem(key)Removes an itemsessionStorage.removeItem('token')
clear()Clears everythingsessionStorage.clear()
key(index)Returns the key at an indexsessionStorage.key(0)
lengthNumber of entriessessionStorage.length

4. Example: form data kept while the tab is open

javascript
<input id="name" placeholder="Name" /> <script> const input = document.getElementById('name'); // Restore the value on page reload input.value = sessionStorage.getItem('name') || ''; // Save on change input.addEventListener('input', () => { sessionStorage.setItem('name', input.value); }); </script>

Now the entered name survives a page reload, but if you close the tab and open the site again, the field clears.


5. Example: storing data for a single authorization session only

javascript
sessionStorage.setItem('sessionToken', 'abc123'); // the token survives a page reload console.log(sessionStorage.getItem('sessionToken')); // "abc123" // but disappears when the tab is closed

This is used when you need to store:

  • a token or login state only until the window closes,
  • temporary data (for example, form or filter state),
  • data "drafts" that do not need to persist.

6. Important details

  • Works only with strings, so for objects:

    javascript
    sessionStorage.setItem('user', JSON.stringify({ name: 'Tim' })); const user = JSON.parse(sessionStorage.getItem('user'));
  • Storage capacity is roughly 5 MB.

  • Data is accessible only from the same domain and tab.

  • You can use the storage event, but it does not fire in the same window, only between tabs (which is usually irrelevant for sessionStorage).


Summary

ParameterlocalStoragesessionStorage
Storage lifetimeForever (until cleared)While the tab is open
Access between tabsYesNo
Cleared when the window closesNoYes
Capacity~5-10 MB~5 MB
Data typeStrings onlyStrings only
Common useSettings, themes, user dataTemporary sessions, forms, filters

Remember it simply:

  • localStorage is "forever",
  • sessionStorage is "while the tab is open".

Short Answer

Interview ready
Premium

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