How to use Local Storage in Javascript + an example

Last updated on December 17, 2021

Local Storage is a useful way of storing data within your browser. The data is stored across browser sessions - which means that you can refresh the page and go to different pages without losing the information which is stored inside Local Storage.

If you are building a simple app or you want to store non-sensitive information within your website, local storage is a great addition to your skillset.

It is supported by most major browsers. To demonstrate how you can save and read information, we are going to build a simple e-commerce website with a cart page. I will build it in plain HTML and Javascript, but you are welcome to do this example in a framework of your choice.

Local Storage and its methods

Local storage is similar to Session storage except that Local Storage is not cleared whenever the page is closed. This means that you can close the browser, but the data stored in Local Storage will still be there.

setItem()

localStorage.setItem(keyName, keyValue) method writes a key/value pair to localStorage. The keyName and keyValue should be strings, so if you want to save an array or object to keyValue, you will need to convert them into strings using Array.prototype.toString() or JSON.stringify(object).

getItem()

localStorage.getItem(keyName) retrieves an item from the localStorage by keyName. Note that it will return null if the key does not exist.

The return value is the keyValue associated with the keyName. The return value will be a string, so if you have saved an array or object (like described above) you will need to convert them to the relevant data type in order to use them.

removeItem()

localStorage.removeItem(keyName) will remove the provided key from localStorage.

clear()

localStorage.clear() clears all keys from local storage. It basically resets localStorage.

key()

localStorage.key(index) returns the keyName at the given index within localStorage.

Building a simple e-commerce website with a checkout page

Now let's put our newly acquired knowledge into practice. We will have two pages, one with a list of products with a name, price, and "Add to cart" button and a cart page with a total price and a button that clears the cart.

This is only an example to illustrate how to use local storage. You shouldn't implement an actual checkout page with it, because the user can easily change the price number within the Dev Tools.

The setup

Let's begin by building a simple page with one div where we can insert our catalogue into using Javascript.

Within our Javascript code, we create a simple list of products which we then loop through and insert our objects with the buttons onto the DOM inside the "catalogue" div.

html

1
<!-- index.html -->
2
<div id="catalogue">
3
</div>

javascript

1
  const data = [
2
    {
3
      name: "Kindle",
4
      price: 70
5
    },
6
    {
7
      name: "Cool Lamp",
8
      price: 15
9
    },
10
    {
11
      name: "Mirror",
12
      price: 25
13
    }
14
  ]
15
  
16
  const wrapper = document.getElementById("catalogue")
17
  data.forEach(element => {
18
    // item wrapper
19
    let item = document.createElement("DIV")
20
    item.innerHTML = element.name
21

22
    // item price
23
    let itemPrice = document.createElement("DIV")
24
    itemPrice.innerHTML = `$${element.price}`
25
    item.appendChild(itemPrice)
26

27
    // item button
28
    let itemButton = document.createElement("BUTTON")
29
    itemButton.innerHTML = "Add to cart"
30

31
    itemButton.dataset.name = element.name
32
    itemButton.dataset.price = element.price
33
    itemButton.classList.add("add-to-cart")
34
    item.appendChild(itemButton)
35

36
    // hr to separate the items
37
    item.appendChild(document.createElement("HR"))
38

39
    // insert item to the main wrapper
40
    wrapper.appendChild(item)
41
    return true
42
  })

Add an event listener

Our next task is to add a click event listener to the item, so every time we click on an item's button, we add it to local storage (our cart)

As mentioned above, when you retrieve an object from Local Storage, it will be in a string format. You need to convert it back into an object using JSON.parse().

You also need to convert the object into a string before you save it into Local Storage. You can do it using JSON.stringify().

javascript

1
// We have to loop through all buttons and add an event listener to each individual button
2
// jQuery/React makes it a lot easier to do something like this
3
Array.from(document.getElementsByClassName("add-to-cart")).forEach(function (
4
  element
5
) {
6
  element.addEventListener("click", (e) => {
7
    // retrieve current cart if it exists. If it doesn't create an empty cart
8
    let cart = JSON.parse(localStorage.getItem("cart")) || [];
9

10
    let newItem = {
11
      name: e.target.dataset.name,
12
      price: e.target.dataset.price,
13
    };
14
    cart.push(newItem);
15

16
    localStorage.setItem("cart", JSON.stringify(cart));
17
  });
18
});
19

You can go to your browser's dev tools and inspect your local storage objects.

Creating the cart page

We now have the ability to add items to a cart. Our next and final step is to create a cart page where can see the total price of our items and a button which we can clear our cart with.

html

1
<!-- cart.html -->
2
<body>
3
  <a href="index.html">Go to catalogue page</a>
4
  <h1>My Cart</h1>
5
  <button id="clear-cart">Clear cart</button>
6
  <div id="overall-price">
7
  </div>
8
</body>

javascript

1
// retrieve items from the cart
2
let cart = JSON.parse(localStorage.getItem("cart")) || [];
3
let overallPrice = 0;
4

5
if (cart.length) {
6
  // using forEach, calculate the total price of each item within our cart array
7
  cart.forEach((element) => {
8
    overallPrice += parseInt(element.price, 10);
9
  });
10
}
11
document.getElementById(
12
  "overall-price"
13
).innerHTML = `Overall Price: $${overallPrice}`;
14

15
// adds an event listener to clear our cart
16
document.getElementById("clear-cart").addEventListener("click", () => {
17
  localStorage.removeItem("cart");
18
  alert("Cart is cleared!");
19
});

You did it! If you want to make this a more complete example and gain a deeper understanding of Local Storage, here are some extra tasks you can do:

Ability to see how many times we have selected a certain item in the cart page
When you clear your entire basket, that should be reflected on the page (currently you need to refresh to page to see an empty basket)
Ability to delete an item from a cart (both only 1 occurrence of the item and all items)
Style the pages
Expand the list by adding images and descriptions to each item

Contact me on Twitter or comment on the post if you need any help.

Limitations of Local Storage

It might be convenient to use Local Storage, but you should be aware when you shouldn't use it. In general, do not use localStorage to store sensitive information such as user or purchase data as it can be accessed and modified by anybody.

It also has a 10MB limit in Google Chrome, but browsers like Opera might increase the storage place if needed. In general, 10MB should be enough for whatever you are doing, as this amount of space can store millions of string characters.

Level up your web development skills

Get articles, guides and interviews right in your inbox. Join a community of fellow developers.

No spam. Unsubscribe at any time.