HTML5 Local Storage – Complete Guide

HTML5 is one of the most fashionable topics in today’s web programming world. HTML5 contains lots of new features that allege to change the web face, big players like Google and Apple are pushing for it and browsers competes to implement more and more html5 features. In this conditions there is no surprise that everyone is talking about it.
In this post we are going to analyse exhaustively an HTML5 simple feature which is already implemented in all the modern browsers: local storage. Local Storage is just a part of the Web Storage api. It is already defined in the HTML5 specifications and it’s implemented in all the modern browsers:

IE	Firefox	Safari	Chrome	Opera	IPhone	Android
8+	3.5	4.0+	4.0+	10.5+	2.0+	2.0+

Local Storage is intended to be used for storing and retrieving data in html pages from the same domain. The data can be retrieved from all the windows in the same domain even if the browser is restarted. The Session Storage is the other Web Storage option and the data is available only in the window it was stored in and is lost when the browser window is closed.
Local Storage along with Session Storage aims to be a replacement of the cookies, defining a more consistent API. There are a few differences from the cookies:
- While the cookies are accessible from both client and server side, Web Storage in general and Local Storage in particular is accessible only from client side.
- Enhanced capacity(official for cookies is 4 kbytes) to more than 5Mb per domain(Firefox, Google Chrome, and Opera and 10MB in IE).
The local storage is a simple javascript api that you can use inside html5 pages if it’s supported by the browser. The Local Storage implements the same interface that can be used for Session Storage as well. Here is the interface as it is defined by :

1. interface Storage {  
2.   readonly attribute unsigned long length;  
3.   getter DOMString key(in unsigned long index);  
4.   getter any getItem(in DOMString key);  
5.   setter creator void setItem(in DOMString key, in any value);  
6.   deleter void removeItem(in DOMString key);  
7.   void clear();  
8. };  

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 value);
  deleter void removeItem(in DOMString key);
  void clear();
};

Testing if the browser supports Local Storage

When you intend to use Local Storage you have to take in consideration that it is not supported by all the browsers. If the correct run of your application depends on the local storage functionality you have find other features to rely if it’s not supported, or to inform the user that the application doesn’t run properly on his browser. In order to check if it’s supported you have to check if the localStorage instance exists.

1. function testSupport()  
2. {  
3.     if (localStorage)  
4.         return "Local Storage: Supported";  
5.     else  
6.         return "Local Storage: Unsupported";  
7. }  

function testSupport()
 {
  if (localStorage)
   return "Local Storage: Supported";
  else
   return "Local Storage: Unsupported";
 }

How to Store a Value

Storing values is very simple, all you have to do is to invoke the setItem method, providing a key and a value, or to use use the localStorage object as an associative array:

1. localStorage.setItem("key1", "value1");  
2. localStorage["key1"] = "value1";  

localStorage.setItem("key1", "value1");
 localStorage["key1"] = "value1";

How to Retrieve a Value

Retrieving stored values is as simple as possible:

1. alert(localStorage.getItem("key1"));  
2. alert(localStorage["key1"]);  

alert(localStorage.getItem("key1"));
 alert(localStorage["key1"]);

List all stored values

If you need to check all the values stored in local storage you can iterate through the keys, listing the values accordingly.

1. function listAllItems(){  
2.     for (i=0; i<=localStorage.length-1; i++)  
3.     {  
4.         key = localStorage.key(i);  
5.         val = localStorage.getItem(key);  
6.     }  
7. }  

function listAllItems(){
 for (i=0; i<=localStorage.length-1; i++)
 {
  key = localStorage.key(i);
  val = localStorage.getItem(key);
 }
}

Remove a Value

Compared to cookies, html5 local storage has a much bigger capacity. However, it doesn't mean it's unlimited. If you application uses intensively the local storage, you have to take care to remove the objects you don't need anymore.

1. void removeItem("key1");  

void removeItem("key1");

Clear all the values

When the web application is "closed" or "started" you can clean all the stored values:

1. localStorage.clear();