Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog
Check out the new Pro Zone

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.

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.

Support CodeSweetly