HTML5 Series - Web Storage

13 December 2012

One of the best benefits of HTML5 particularly for Web Apps is the ability to store data locally within the users browser. This means in many places you can speed your Web App up by fetching data once and then retrieving it locally in the future, rather than going back to a server each time.

There are 2 types of storage available localStorage and sessionStorage. The simple difference is that localStorage doesn't expire while sessionStorage expires at the end of the users session.

Both types store data in a key/value list and could not be simpler:

1// local storage
2localStorage.variableName = value;
3 
4// session storage
5sessionStorage.variableName = value;

One thing to note though is you can only store text. If you want to store something more complex the simple solution is to convert it to and from JSON. E.g.

1var myColours = [ 'red', 'blue', 'green', 'yellow'];
2 
3// Save to local storage
4localStorage.colours = JSON.stringify(myColours)
5 
6// Retrieve from local storage
7var retrievedColorus = JSON.parse(localStorage.colours);