Skip to main content

setItem() Method – How to Store Items in Web Storage

The setItem() method stores its key and value arguments inside the specified web storage object.

Syntax of the setItem() Method​

setItem() accepts two required arguments. Here is the syntax:

webStorageObject.setItem(key, value);
  • webStorageObject represents the storage object you wish to manipulate—that is, localStorage or sessionStorage.
  • key is the first argument accepted by setItem(). It is a required string argument representing the name of the web storage property you want to create or update.
  • value is the second argument accepted by setItem(). It is a required string argument specifying the value of the key you are creating or updating.
note
  • The key and value arguments are always string.
  • Suppose you provide an integer as a key or value. In that case, browsers will convert them to strings automatically.

Examples​

Below are examples of the setItem() method.

How to store data in session storage​

  1. Invoke sessionStorage's setItem() method.
  2. Provide the name and value of the data you wish to store.
// Store color: "Pink" in the session storage:
sessionStorage.setItem("color", "Pink");

// Log the session storage object to the console:
console.log(sessionStorage);

// The invocation above will return: {color: "Pink"}

Try Editing It

Note that your browser's session storage may contain additional data if it already uses the storage object to store information.

How to store data in local storage​

  1. Invoke localStorage's setItem() method.
  2. Provide the name and value of the data you wish to store.
// Store color: "Pink" in the local storage:
localStorage.setItem("color", "Pink");

// Log the local storage object to the console:
console.log(localStorage);

// The invocation above will return: {color: "Pink"}

Try Editing It

Note that your browser's local storage may contain additional data if it already uses the storage object to store information.

Important Stuff to Know about Storing Data in Web Storage​

It is best to serialize objects before storing them in local or session storage. Otherwise, the computer will store the object as "[object Object]".

Example 1: Store an object in the web storage without serializing it​

// Store myBio object in the session storage:
sessionStorage.setItem("myBio", { name: "Oluwatobi" });

// Log the session storage object to the console:
console.log(sessionStorage);

// The invocation above will return:
// {myBio: "[object Object]", length: 1}

Try Editing It

You can see that the computer stored the object as "[object Object]" because we did not serialize it.

Example 2: Store a serialized object in the web storage​

// Store myBio object in the session storage:
sessionStorage.setItem("myBio", JSON.stringify({ name: "Oluwatobi" }));

// Log the session storage object to the console:
console.log(sessionStorage);

// The invocation above will return:
// {myBio: '{"name":"Oluwatobi"}', length: 1}

Try Editing It

We used JSON.stringify() to convert the object to JSON before storing it in the web storage.

tip

Learn how to convert JSON to JavaScript objects.

note

setItem() may throw an exception whenever the storage object is full.

Overview​

setItem() sets its key and value arguments in the specified local or session storage object.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Join CodeSweetly Newsletter