Save data to the browser with localStorage and sessionStorage

Reading Time: 2 minutes 🕑

Last updated: September 27, 2022.

Methods available on the localStorage and sessionStorage objects allow you to store and retrieve data from a user’s browser.

The difference between the two is that data saved via localStorage persists until it is cleared, whereas data saved via sessionStorage clears automatically at the end of a user session (upon tab close).

Saving to local storage via localStorage and sessionStorage is supported in all major browsers. The storage space limit is typically 5MB for each storage method per domain.

Table of contents

Saving to local storage

Data can be saved via localStorage and sessionStorage using the setItem() method. It accepts a key and data as arguments.

// With localStorage:
const testDataLocal = "Save me with localStorage";
localStorage.setItem('A test item', testDataLocal);

console.log(localStorage); // { A test item: 'Save me with localStorage', length: 1 }

// With sessionStorage:
const testDataSession = "Save me with sessionStorage";
sessionStorage.setItem('A test item', testDataSession);

console.log(sessionStorage); // { A test item: 'Save me with sessionStorage', length: 1 }

Items saved via localStorage and sessionStorage are saved to separate storage spaces.

Retrieving data from local storage

To retrieve data, use the getItem() method via localStorage and sessionStorage. As an argument, pass in the key of the item you want to retrieve.

localStorage.setItem('test-item', "I love the localStorage object");
localStorage.getItem('test-item'); // "I love the localStorage object"

sessionStorage.setItem('test-item', "The sessionStorage object too!");
sessionStorage.getItem('test-item'); // "The sessionStorage object too!"

Deleting items and clearing storage

Deleting an item

To delete an item from local storage, use the removeItem() method via localStorage and sessionStorage.

localStorage.setItem('test-item', "This localStorage thing is quite useful");
localStorage.getItem('test-item'); // "This localStorage thing is quite useful"
localStorage.removeItem('test-item');
localStorage.getItem('test-item'); // null


sessionStorage.setItem('test-item', "The sessionStorage object too!");
sessionStorage.getItem('test-item'); // "The sessionStorage object too!"
sessionStorage.removeItem('test-item');
sessionStorage.getItem('test-item'); // null

Clearing all items

To clear all items stored via localStorage or sessionStorage, use the clear() method.

localStorage.clear();
console.log(localStorage); // {length: 0}

sessionStorage.clear();
console.log(sessionStorage); // {length: 0}

Saving and retrieving objects and arrays

Only string data can be stored in local storage.

But other stringifiable data can also be stored and retrieved by converting it to a string upon saving:

const obj = { name: "Brian", lastName: "Adams" };
const objAsString = JSON.stringify(obj);
localStorage.setItem('my-object', objAsString);

And then converting it back to a data object when retrieving it:

const obj = { name: "Brian", lastName: "Adams" };
const myObjAsString = localStorage.getItem('my-object');
const myObj = JSON.parse(myObjAsString);
console.log(myObj); // { name: "Brian", lastName: "Adams" }

This works for both objects and arrays.

Checking local storage

If item exists

To check if an item already exists in localStorage, you can use a conditional if...else statement, checking if an attempt to retrieve the item returns a truthy value.

localStorage.setItem('test', "x");

function doesItemExist(key) {
  if (localStorage.getItem(key)) {
    return true
  } else {
    return false
  }
}

doesItemExist('test'); // true
doesItemExist('test2'); // false

If local storage is available

In some rare cases, local storage may be inaccessible because it is full or a user's browser settings disallow its use.

You can check if local storage is accessible by attempting to store something there inside a try...catch statement.

function isStorageAvailable() {
  try {
    localStorage.setItem('test-item', "x");
    localStorage.removeItem('test');
    return true;
  } catch(e) {
    console.log("Storage unavailable", e);
    return false;
  }
}

isStorageAvailable(); // true or false

Related links