Tutorial: HTML5 Web Storage

Prior to the invention of cookie, there was no way for a server to "remember" about a client over requests since the HTTP protocol is stateless.

An HTTP cookie is a text file stored in your web browser that contains information such as user preferences for a web site for instance.

The way a cookie store information works with key/value pairs.

Here for instance, I create cookie1 that will contain value1 and cookie2 that will contain value2:

Code:


document.cookie='cookie1=value1; cookie2=value2';

The syntax is: [name]=[value][semicolon][space][name2]=[value2]

It also contains other information such as the expiration date to specify the time during the cookie is alive.

The problems that are encountered with HTTP cookies are the following:

They are sent in every HTTP request (even if the cookie is not modified)
Data is sent unencrypted over the Internet (except your entire web application use SSL)
The size for a cookie is very small (approximately 4KB) and depending on the browser you can only have a limited number of cookies for a same domain (20 cookies for IE6 for instance)
There are no real API to create, read, update or delete a cookie. That can quickly become a pain for developers

This tutorial is not about HTTP cookies but if you want to know more about HTTP cookies, you can read this great tutorial written by Peter-Paul Koch

Many other storage solutions have been implemented to address these problems either by browser vendors including their own solution in their browser or using third party plugins. Among them:

userData for Microsoft Internet Explorer
Flash cookies by Adobe
Gears by Google

Problems are that these solutions are first non standard, they are either specific browser specific solution or you have to rely on third party plugins.

HTML5 Web storage goal is to provide a standardized and native API that works the same way on any browser.

Originally included in the Web Applications 1.0 specification, it has now its own specification called W3C Web Storage. You might also see the following terms "Local Storage" or "DOM Storage" used by some browser vendors for referring to Web storage.

Web storage is a way to store key/value pairs information on the web browser same as cookies except that information is not sent to the server and stays on the client side.

There are two types of storage: sessionStorage and localStorage

sessionStorage: Each window or tab has its own sessionStorage object. That means that any key/value pair created in sessionStorage for a window/tab can only be accessed from this window/tab. Data remain available until this same window/tab is closed.
localStorage: the localStorage object is shared between window/tab for a same domain and data remain available until explicitly deleted by the user using either the web application or the browser options

sessionStorage and localStorage both share the same API. They both implement the Storage interface which is the following:

Code:


interface Storage {
  readonly attribute unsigned long length;
  getter DOMString key(in unsigned long index);
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any data);
  deleter void removeItem(in DOMString key);
  void clear();
};

I created a simple project where I can add, modify and delete key/value pairs in localStorage and I will provide a link to download it at the end of this tutorial.

So, how to create a new item in the localStorage:

Code:


localStorage.setItem("name","Laurent");

Calling the same method for the same key does not create a new item but modify the existing one:

Code:


localStorage.setItem("name","Julie");

To display the value of an item we access it using its key:

Code:


alert(localStorage.getItem("name"));

To count the number of items, I can use the length attribute.
Here in this case this would return 1 since we have only one item in the localStorage.

You can get a key using an index number. It is zero-based index (first item can be accessed at index 0). In this case to display the key of the first item I would do:

Code:


alert(localStorage.key(0));

There is no method to return all items but I can combine the usage of the length attribute and the key method like this:

Code:


//Get the number of elements to display
var numLocal=localStorage.length-1;

//For each element in the localStorage add a new li
for(i=0;i<=numLocal;i++) {
  //Get the Key and from this Key, get the value
  var key=localStorage.key(i);
  var value=localStorage.getItem(key);

  //Create the list item
  alert(key + " " + value);
}

To delete an item using its key:

Code:


localStorage.removeItem("name");

The capacity of storage using web storage is 5MB per origin per browser. This is important to know that if you go over 5MB a QUOTA_EXCEEDED_ERR exception will be thrown.

Currently there is no way to ask the user for more storage space.

In terms of browser support, Web storage is supported on almost all browsers latest version. According to http://caniuse.com, these below are the browser along with their versions that support web storage:

IE 8.0 and 9.0
Firefox 3.0, 3.5, 3.6 and 40
Safari 4.0, 5.0 and 6.0
Chrome 5.0, 6.0, 7.0, 8.0 and 9.0
Opera 10.5, 10.6 and 11.0
iOS Safari 3.2, 4.1 and 4.2
Android browser 2.2

As promised, here is my sample code (no css yet), download it and play with it: https://www.protechtraining.com/static/tutorials/html5/web-storage-example.zip

Cheers!