Part 5.5Local and session storage in JavaScript

HTML5, which is supported by all modern browsers to some degree, brought two new forms of storage in JavaScript, namely local storage and session storage. Most crucially, unlike cookies, these types of storage are never sent to the server, unlike cookies. Collectively, these storage types are known as web storage and are part of the Web Storage API.

Chrome local storage viewer in the Developer Tools

These types of storage give rise to more powerful and efficient storage mechanisms that mean less server intervention and more powerful web apps and websites as a result. For example, they allow users to store preferrences on the local machine, store a basket whilst the user is visiting different pages or store values between pages.

Both forms of storage server different purposes. Just as session in a server side language lasts so long as the browser is not closed or it times out, a session value in the session storage in JavaScript is only available whilst that session is open - when the browser is closed it is removed.

Session storage

Session storage is achieved using the sessionStorage keyword.

sessionStorage.setItem("number", 25);

The following sample will retrieve the data and perform an operation on it:

var e = 15;
alert(e + sessionStorage.getItem("number"));

Session storage stores data as strings, regardless of their original type. This means that although a number was inserted as the value, the browser converted it into a string before storing it. To fix this, the parseInt function needs to be used:

var e = 15;
alert(e + parseInt(sessionStorage.getItem("number")));

Local storage

Local storage is an alternative to session storage and is stored on client's browser until it is delete or the cache is cleared. Local storage works really well for storing details about pages visited, storing user preferences and much more.

The following example is identical to the session storage, except that it will use local storage. This means that if the browser is closed and the second sample is run, it will retrieve the value successfully.

localStorage.setItem("number", 200);

The following sample will always return the correct value, even if the previous one has not been run in the session.

var e = 15;
alert(e + parseInt(localStorage.getItem("number", 200)));

Use cases for web storage

The Web Storage API is one of the most useful APIs for making a website better tailored to an individual. This is because the users preferences can be stored in their browser rather than on the server. A modern example of this is dark mode whereby the user selects that they want to see the dark version of a website. The website then stores this as a session variable and retrieves it on each page change.

Another use case is a basket. Whilst the user is visiting different pages on a website and adding items to their basket, the session storage variable is storing their basket. A basket is a little more complicated since it would need to be stringified to JSON for it to be stored since web storage saves data as strings.

The following is a simple basket script:

var basket = {};

sessionStorage.setItem("basket", JSON.stringify(basket));

The next script adds some items to the basket:

function addItem(collection, item, quantity){
  if(collection[item] === undefined){
    collection[item] = quantity;
  } else{
    collection[item] += quantity;
  }

  return collection;
}

var basket = {};

basket = JSON.parse(sessionStorage.getItem("basket"));

basket = addItem(basket, "intel_core_i9_9900k", 2);
basket = addItem(basket, "intel_core_2_quad_q9950", 6);

sessionStorage.setItem("basket", JSON.stringify(basket));

Now to display the basket:

var basket = JSON.parse(sessionStorage.getItem("basket"));
var output = "";
for(item in basket){
  //The \n puts this on a new line
  output += item + " : " +  basket[item] + "\n";
}
alert(output);