Geoffrey Vandiest Blog

There is a feature in HTML5 that enables you to store named key/value pairs in the local storage of your browser. The advantage over using regular cookies is that your data is never send to the remote web server and that you can store a lot more compared to the 4KB limitation of cookie storage space.

As the local storage is a feature making part of the HTML5 specification, only modern browser supports is;
Safari 4.0, Opera 10.5,IE8, FireFox 3.5, Chrome 4.0 and IOS above version 2.0.

As for any feature of HTML5 before using it you should check if your browser supports the feature:

function can_use_html5() {

   try {

       return 'localStorage' in window && window['localStorage'] !== null;

   } 

   catch (e) {

       return false;

   }

}

To store or retrieve an item from the local storage:

//Retireve an item:

var item = localStorage.getItem("mykey");

//Store an item:

localStorage.setItem("myKey", "myValue");

To clear an item from the local storage or remove all items:

//Remove an item

localStorage.removeItem("myKey");

//Remove all

localStorage.clear();

With this feature we are now able to build web applications that can work offline. Here under I build an application that stores persons profiles in the local storage. I use the JSON.stringify method to serialize the persons before storing the JSON strings in the local storage and JQuery to retrieve the values and bind the events:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Local Storage</title>

    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.1.js" type="text/javascript"></script>

</head>

  

<body>

    <div id="resultMessage">&nbsp;</div>

    <table style="position: absolute; left: 10px;">  

        <tr>

            <td>

            Firstname:

            </td>

            <td><input type="text" id="firstname" />

            </td>

        </tr>

        <tr>

            <td>

            Lastname:

            </td>

            <td><input type="text" id="lastname" />

            </td>

        </tr>

        <tr>

            <td>

            E-mail: 

            </td>

            <td><input type="text" id="email" />

            </td>

        </tr>

         <tr>

            <td>

                <input type="button" id="save"  value="Create" />

            </td>

            <td>

                <input type="button" id="print"  value="Print"/>

            </td>

        </tr>

    </table>

    <script type="text/javascript">

        $(function () {

            if (!can_use_html5()) {

                alert("This browser does not support Html5 storage, upgrade or change your browser!");

            }

        });

  

        $(function () {

            $("#save").click(function () {

                

                var person = getPerson();

                

                //simple validation

                if (person == null) {

                    alert("Fill in all fields please!");

                    return;

                }

                

                var jsData = JSON.stringify(person);

                localStorage.setItem($("#email").val(), jsData);

                

                $("#resultMessage").html($("#email").val() + " stored in local storage");

                clearAllText();

            })

        });

  

        $(function () {

            $("#print").click(function () {

                for (var i = 0; i < window.localStorage.length; i++) {

                    document.write('<div id="record_' + i + '"> ' + localStorage[localStorage.key(i)] + '</div>');

                }

                localStorage.clear();

            })

        });

  

        function getPerson() {

            var firstname = $("#firstname").val();

            var lastname = $("#lastname").val();

            var email = $("#email").val();

            //simple validation

            return (firstname == "" || lastname == "" || email == "") ? null : { Firstname: firstname, Lastname: lastname, Email: email };

        }

  

        function can_use_html5() {

            try {

                return 'localStorage' in window && window['localStorage'] !== null;

            } 

            catch (e) {

                return false;

            }

        }

  

        function clearAllText() {

            

            $("#firstname").attr("value", "");

            $("#lastname").attr("value", "");

            $("#email").attr("value", "");

        }

    </Script>

</body>

</html>

HTML5 enables new possibilities for all types of scenarios like creating IPAD/IPhone web applications without having to program in objective c and/or upload the app to the app store. In a future post I will demonstrate how you can extend this application to create such an application.

about software development.

HTML5 Local Storage

Related posts