Web Storage API Tutorial

The Web Storage API allows client side data storage. Just like cookies only they don’t have to be passed with every request.

The two methods for storing data are:

  • sessionStorage
  • localStorage

Both are Storage objects with the exact same methods.

The difference between them is that sessionStorage data is wiped once the browser closes. On the other hand, localStorage data persists after a browser restart.

We’ll use localStorage for this demonstration.

Set a value

To set a value

localStorage.setItem("key", "value");

One thing to take note of is that we can only store strings.

JavaScript has helpful funtions for converting types. For instance

// Converts the returned value to type int

Get a value


Remove a value


Remove all values



I’m going to set a key named “visits” that increments by one on every refresh.