localStorage vs sessionStorage
localStorage and sessionStorage share the same methods, but localStorage survives closing the browser, while sessionStorage clears when the tab closes.
Side-by-side comparison
#Data lifetime
- localStorage
- Until manually removed or the site’s data is cleared
- sessionStorage
- Until the browser tab is closed
Access from other tabs of the same domain
- localStorage
- Yes, shared storage across all tabs
- sessionStorage
- No, each tab has its own storage
A duplicated tab
- localStorage
- Sees the same data right away
- sessionStorage
- Gets a copy of the data, then works independently
Data after restarting the computer
- localStorage
- Stays saved
- sessionStorage
- Doesn’t exist, the tab was already closed
Methods and the storage limit
- localStorage
- The same methods, a limit of about 5 MB
- sessionStorage
- The same methods, a limit of about 5 MB
Typical use
- localStorage
- Theme, language, settings for future visits
- sessionStorage
- A form step, filters, data for a single visit
Example
#localStorage.setItem('theme', 'dark')
sessionStorage.setItem('step', 2)
console.log(localStorage.getItem('theme'))
console.log(sessionStorage.getItem('step'))
localStorage.removeItem('theme')
console.log(localStorage.getItem('theme'))
console.log(sessionStorage.getItem('step'))dark 2 null 2
The examples on this page run inside an isolated frame where both storages are unavailable, so this code doesn’t run in the preview. On a regular page it works fine and prints the result shown above.
Definition and usage
#Both storages expose the same methods: setItem(), getItem(), removeItem(), clear(), and the length property. They only store strings (convert objects with JSON.stringify()), are separate for each domain, and have a limit on the order of a few megabytes. Refreshing the page doesn’t remove data from either one.
What sets them apart is their lifetime and scope. localStorage stays in the browser until you remove it yourself or the user clears the site’s data, and it’s shared across all tabs of the same domain. sessionStorage exists only in a single tab: closing the tab removes it, and another tab with the same page already has its own, empty session storage (a duplicated tab gets a copy, but from that point on both work independently).
The choice depends on how long the data should live. Store settings, the theme, or the interface language, meant to survive until the next visit, in localStorage. Keep a form step, list filters, or the fact that a banner was dismissed during this visit, in sessionStorage.
Syntax
#localStorage.setItem(key, value)
localStorage.getItem(key)
sessionStorage.setItem(key, value)
sessionStorage.getItem(key)More examples
#const settings = { theme: 'dark', fontSize: 16 }
localStorage.setItem('settings', JSON.stringify(settings))
const signup = { step: 2, email: 'emma@example.com' }
sessionStorage.setItem('signup', JSON.stringify(signup))
console.log(JSON.parse(localStorage.getItem('settings')))
console.log(JSON.parse(sessionStorage.getItem('signup'))){ theme: 'dark', fontSize: 16 }
{ step: 2, email: 'emma@example.com' }In the preview both storages are unavailable, but on a regular page the code works. settings will survive closing the browser, while signup will disappear once the tab closes.
console.log(localStorage.getItem('missing'))
console.log(sessionStorage.getItem('missing'))
console.log(localStorage.getItem('missing') === sessionStorage.getItem('missing'))null null true
Both getItem() methods return null for a missing key, no matter which storage is looking for it.
Good practices
#- Before saving an object or array, convert it to a string with
JSON.stringify(), and useJSON.parse()after reading it. Both storages hold only strings. - Don’t keep passwords or session tokens in either of these storages. Any script running on the page has access to them.
- Wrap reads and writes in a
try...catchblock. In private browsing, or with the site’s data blocked, access can throw an error.
Related entries
#- localStorageBrowser storage for key-value pairs that survives page refreshes and browser restarts.
- sessionStorageBrowser storage for key-value pairs that works only in the current tab and disappears when it closes.
- 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.
Spotted a mistake or missing an example? Write to us.