sessionStorage
Browser storage for key-value pairs that works only in the current tab and disappears when it closes.
- Returns
getItem()returns the saved string ornull. The other methods returnundefined.
Example
#sessionStorage.setItem('signupStep', 2)
sessionStorage.setItem('signupData', JSON.stringify({ name: 'Emma', course: 'JavaScript' }))
console.log(sessionStorage.getItem('signupStep'))
console.log(JSON.parse(sessionStorage.getItem('signupData')).course)
sessionStorage.removeItem('signupStep')
console.log(sessionStorage.getItem('signupStep'))2 JavaScript null
The examples on this page run inside an isolated frame where sessionStorage isn’t available, so this code doesn’t run in the preview. On a regular page it prints the result shown above, and the data disappears once the tab closes.
Definition and usage
#sessionStorage has the same methods as localStorage: setItem(), getItem(), removeItem(), clear(), and the length property. It differs in how long the data lives: it exists only within a single browser tab. Refreshing the page doesn’t remove it, but closing the tab does.
Each tab has its own, separate session storage, even when you open the same page in two tabs. That makes sessionStorage a good fit for data tied to a single visit: a step in a multi-step form, filters on a course list, a spot in a long lesson, or the fact that the user already closed a banner in this session.
As with localStorage, values are always strings, so save objects with JSON.stringify() and read them with JSON.parse(). Storage is separate for each domain, has a limit of a few megabytes, and is available to every script on the page, so don’t store passwords or tokens in it.
Syntax
#sessionStorage.setItem(key, value)
sessionStorage.getItem(key)
sessionStorage.removeItem(key)
sessionStorage.clear()
sessionStorage.lengthParameters
#key
string
The name under which you save or read the value.value
string
The value to save. Other types get converted to a string.
More examples
#const saved = sessionStorage.getItem('courseFilters')
const filters = JSON.parse(saved) ?? { level: 'all', sort: 'newest' }
console.log(filters)
filters.level = 'beginner'
sessionStorage.setItem('courseFilters', JSON.stringify(filters))
console.log(sessionStorage.getItem('courseFilters')){ level: 'all', sort: 'newest' }
{"level":"beginner","sort":"newest"}On the first visit in this tab nothing is saved yet: getItem() returns null, JSON.parse(null) also gives null, so the ?? operator supplies the default filters. After refreshing the page the chosen filters stay, and a new tab starts with the defaults again.
const banner = document.querySelector('#promo')
if (sessionStorage.getItem('promoClosed') === 'yes') {
banner.hidden = true
}
document.querySelector('#close-promo').addEventListener('click', () => {
banner.hidden = true
sessionStorage.setItem('promoClosed', 'yes')
console.log('The banner will come back only in a new tab')
})The banner will come back only in a new tab
The result appears after clicking the button that closes the banner. While navigating between pages in the same tab, the banner stays hidden, and it shows again once the page is opened in a new tab.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Pick
sessionStoragefor single-visit data (a form step, filters), andlocalStoragefor settings that should survive closing the browser. - Duplicating a tab copies its
sessionStorageinto the new tab, but from that moment the two storages are independent. - Wrap storage access in
try...catch. In some private-browsing modes and in frames without access to the site’s data (like the preview on this page), reading throws aSecurityError.
Related entries
#- localStorage vs sessionStoragelocalStorage and sessionStorage share the same methods, but localStorage survives closing the browser, while sessionStorage clears when the tab closes.
- localStorageBrowser storage for key-value pairs that survives page refreshes and browser restarts.
- JSON.stringify()Converts a JavaScript value, such as an object or array, into a string in JSON format.
- JSON.parse()Converts a string in JSON format into a JavaScript value, such as an object or array.
- try...catchCatches errors thrown in the try block and handles them in catch. The optional finally always runs.
- ??The ?? (nullish coalescing) operator returns the right side only when the left side is null or undefined. Ideal for default values.
Spotted a mistake or missing an example? Write to us.