Storing data in the browser

Ordinary variables disappear as soon as the page is reloaded. To remember the chosen theme, a draft message or a shopping cart, the browser provides localStorage — a small memory for each site that survives between visits.

This site's sandbox does not give examples access to storage. Try the code in your browser's console: open any site, press F12 and switch to the Console tab.

Saving and reading

The setItem() method saves a value under a key — the name it will be found by later. The getItem() method returns the value for a key:

localStorage.setItem('theme', 'dark');
 
console.log(localStorage.getItem('theme')); // dark

If there is no such key, getItem() returns null.

Data survives a reload

The key property of localStorage is that data stays after the page is reloaded and even after the browser is restarted. Usually, when the page loads, you read the saved value and fall back to a default if there is none yet:

const theme = localStorage.getItem('theme') ?? 'light';
 
console.log(`Theme: ${theme}`); // Theme: dark

The ?? operator uses the right-hand value if the left one is null. Each site has its own storage: other sites cannot see it.

Strings only

localStorage stores only strings. A number turns into a string when saved, and you need to turn it back into a number when reading:

localStorage.setItem('visits', 5);
 
const visits = localStorage.getItem('visits');
console.log(typeof visits); // string
console.log(Number(visits) + 1); // 6

Objects and arrays via JSON

An object is first turned into a string with JSON.stringify() and restored with JSON.parse() when read:

const cart = [{ title: 'Book', price: 12 }];
localStorage.setItem('cart', JSON.stringify(cart));
 
const saved = JSON.parse(localStorage.getItem('cart'));
console.log(saved[0].title); // Book

Removing

The removeItem() method removes one key, clear() removes all of this site's data:

localStorage.removeItem('theme');
 
console.log(localStorage.getItem('theme')); // null

sessionStorage

localStorage has a sibling, sessionStorage, with the same methods. The difference is how long data lives: sessionStorage is cleared when the user closes the tab. It suits temporary data, such as the current step of a multi-page form:

sessionStorage.setItem('step', '2');
 
console.log(sessionStorage.getItem('step')); // 2
// localStorage would keep this value even after the tab is closed

Common mistake

Saving an object without JSON.stringify(). The object silently turns into the string [object Object], and the data is lost:

localStorage.setItem('user', { name: 'Anna' });
 
console.log(localStorage.getItem('user')); // [object Object]

And do not keep passwords or other secrets in localStorage: any script on the page can read it.