Local Storage and Session Storage - Web Storage API

Storing data in browser

Both localStorage and sessionStorage are parts of Web Storage API and can be used to store key/value pairs locally inside a browser. Data saved in both of these places won't be erased after page refresh (for sessionStorage), and surprisingly, after browser restart (localStorage). But you can ask a question - we have well known and opinionated cookies so why we even bother using local/sessionStorage. Here are the three main advantages of localStorage/sessionStorage over cookies:

• we store all data locally and we don't send them with every request inside its header straight to a server, it's recommended from the security point of view, it is directly connected with the next advantage,
• thanks to not sending this data with every request, we can save up to 10 MB of data for most of modern browsers,
• API is very easy to understand in a short period of time and ease to use in our projects

In that situation cookies are definitely are loosing their position. However, they are still usable particularly for all operations related to authentication - but more on this in different article.

Local and session

Both have the same API and its usage is practically identical. In terms of choosing one of them we mostly take into account how long we need to keep saved data. Further part of this article will consist of examples for localStorage but it's worth to mention that these examples will work the same with sessionStorage syntax. Data stored in localStorage is accessible in the browser between its tabs and windows if they comes from the same origin - if the changes occurred in the other window (but in the same origin - path may be different) - they will be visible in other windows.

Writing and reading

To write new key/value pair in the localStorage we use setItem() method - it takes two arguments, the key and corresponding value

localStorage.setItem("kangaroo", "🦘");

To read the value we use getItem() method. It accepts only one argument - previously used key. It returns corresponding value in the form of a string.

const myItem = localStorage.getItem("kangaroo");

Updating and deleting

To update the value stored in the localStorage we use the same method as in the case of creating new entry - we use the same key but with different argument containing new value.

localStorage.setItem("panda", "🐼")

*// myItem = "🐼"*

We can remove value from localStorage using two methods. Using removeItem() which accepts one argument being the key of the localStorage object:

localStorage.removeItem(key);

or remove all items inside the localStorage using clear() method:

localStorage.clear();

Storing different types of data

Using localStorage we can store only values of type string. Often we will come across the situation when we want to store whole objects. We can achieve that using JSON.stringify() and JSON.parse() methods in the following way:

To add and update:

let myObj = { country: "🇮🇹", dish: "🍕" };

localStorage.setItem(key, JSON.stringify(myObj));

This allows as to save inside the localStorage as a string, not as an object. Due to this, to reuse this object we have to transform our data to the type of object:

let item = JSON.parse(localStorage.getItem(key))

*// item = { country: "🇮🇹", dish: "🍕" }*

That way variable item takes the value of the object key and its type is an object so we can perform all operations related to Javascript's objects.

Checking the storage

From time to time we need to check whether we have some value assigned to a localStorage. For this purpose we can use following syntax:

if (localStorage.length > 0) {
  // ...
}

If localStorage contains at least one element, if will return true. localStorage.length informs us about the number of saved items.

Summary

Both localStorage and sessionStorage allows us to store key/value pairs in the browser

• key and value have to be of type string
• size of saved data can be greater than 5MB
• they don't expire
• data is connected with the origin

localStorage - shared between every tab and window related to the same origin, not erased after browser restart

sessionStorage - accessible inside browser's tab from the same origin, not erased after page refresh but after closing the tab.