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 :

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.

	function testSupport()
		if (localStorage)
			return "Local Storage: Supported"; 
			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:

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

How to Retrieve a Value

Retrieving stored values is as simple as possible:


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.

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.

    void removeItem("key1");

Clear all the values

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

Did you enjoy this tutorial? Be sure to subscribe to the our RSS feed not to miss our new tutorials!
... or make it popular on


  1. I understand that this feature can be accessed and set using JavaScript, but I’m wondering if it can be done with PHP and no JavaScript?

    I’m building a detailed login website and I’m at a cross roads to use traditional cookies or the HTML5 localstorage / sessionstorage.

  2. @Jon
    Yes you are correct.
    localStorage.removeItem(“key1”); simply works.

    We can set item from one function and call from another function.Unlike temporary variable it stores data in browser. It is persistent even if user closes the browser.

  3. I set an item in one page using localstorage.setItem. I am able to get the item in the same page, even if i close the window and come back again, as you said. But if i now go to a next page and come back to the same page, getItem does not return any value, even though I am in the same session.

  4. I have two html pages done in html5 (a.htm, b.htm). And page “a.htm” store the value in session storage.

    I was get the session storage value in same page “a.htm”.

    How to get the same session storage value in “b.htm” page.

    This two pages there in same location.

    But session value not there in “b.htm” page.

  5. Hi, Im new to HTML 5 and I want to store multiple data by using an array. What am I doing wrong, can store one item but multiples I have a problem with? Help please.

    function localStore()
    var cnt = document.getElementsByName(“Data”); //parseInt( //(“input”);
    localStorage.setItem(“cnt_length”, cnt.length);
    //localStorage.setItem(‘names_’ + n, names[n]);

    for (var i = 0; i < cnt.length; i++)
    var text = document.getElementById("Data" + i).value;
    localStorage.setItem("Data" + i,text);
    function localGet()
    var cnt = localStorage.getItem("cnt_length");

    for (var i = 0; i < cnt.length; i++)
    document.getElementById("Data" + i).value = localStorage.getItem("Data" + i);

Leave a Comment.