PHP HTML CSS Tutorials

Tutorials, Resources and Snippets

HTML5 Local Storage – Complete Guide

13 comments

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"; 
		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:

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

How to Retrieve a Value

Retrieving stored values is as simple as possible:

	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.

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:

	localStorage.clear();
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

Written by admin

September 20th, 2010 at 2:15 am

Posted in HTML5

Tagged with , ,

13 Responses to 'HTML5 Local Storage – Complete Guide'

Subscribe to comments with RSS or TrackBack to 'HTML5 Local Storage – Complete Guide'.

  1. I think: void removeItem(“key1″);
    should read: void localStorage.removeItem(“key1″);

    Jon Combe

    2 Oct 10 at 6:41 am

  2. I am wondering are they closure dependent. If set from a function can be called from next function or not?

    Kabindra Bakey

    13 May 11 at 5:45 pm

  3. 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.

    Michael

    21 Sep 11 at 10:07 pm

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

    @Kabindra
    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.

    Neetin Sharma

    8 Dec 11 at 12:50 pm

  5. where the data is stored in the system.and how we specify the path of storage.

    dinks

    29 Jan 12 at 11:01 pm

  6. tell me the physical location of local storage in Mozilla firefox

    Rushit

    30 Jan 12 at 5:05 am

  7. 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.

    VikramN

    3 Feb 12 at 5:06 am

  8. 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.

    Babu.J

    9 Apr 12 at 5:45 am

  9. Thanks for your tutorial. I have some information useful.
    With localStorage, if you using web browser is Mozilla Firefox, data is saved in a file .sqlite with name:webappsstore.sqlite.
    You can see information at: http://kb.mozillazine.org/Profile_folder.
    :)

    TuanLe

    6 Jun 12 at 1:00 am

  10. 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);
    }
    }

    Jean

    18 Jun 12 at 1:52 am

  11. Good tutorial, please writes about HTML5 application cache, and WebSQL.

    VenomApp

    27 Oct 12 at 6:14 pm

  12. If I create a localStorage and set a value in Safari . Can i access the same in Firefox

    Venkat

    12 Dec 12 at 10:38 pm

  13. Never tried, but I’m sure you don’t…

    admin

    12 Mar 13 at 1:34 am

Leave a Reply