HTML5’s Local Storage

HTML5’s Local Storage

Hello Everyone!

Today, I thought I would stop in at work to finish up a quick edit to a website, and when I got done, my co-worker asked me to help him out with something. HTML5.

He was building a web application that showcases some of HTML5’s new features, specifically the new localStorage database. He was working on saving some information to localStorage, and he had three inputs on his form, each of which jQuery was saving to localStorage. His code for submission looked something like this:

$(document).ready(function(){           
     var j = 0;
     $("#form").submit(function(e){

          localStorage.setItem( "user-"+j, $("#user").val() );
           localStorage.setItem( "email-"+j, $("#email").val() );
           localStorage.setItem( "addr-"+j, $("#addr").val() );
          j++;

          e.preventDefault(); // This prevents the form submission from causing a
                                        //page refresh. Needed so that the counter doesn't reset.
     });
});

That code is telling the browser to add those items to the local storage, but append the counter value to the key name. That code worked great, but when we were trying to pull the information from localStorage we ran into a problem.

$("#showContacts").click(function(){
    $("#contactsDiv").text("");


    for( i = 0; i < localStorage.length; i++){
        var theRecord = "User: " + localStorage.getItem("user-" + i) +
                                   "Email: " + localStorage.getItem("email-" + i) +
                                   "Address: " + localStorage.getItem("addr-" + i);

        textNode = document.createTextNode(theRecord);
        p = document.createElement("p");
        p.appendChild(textNode);

        document.getElementById("contactsDiv").appendChild(p);
    }
});

It seemed like it should work; We were pulling the number of records we had saved, and for every record, we appended it to our “Contacts” Div. But it didn’t work! We kept getting all these null values, and we had more records in the “Contacts” div where the information was “null” than where it was real! What was going on?!

Well, after looking into how localStorage works, we ran across something that helped us figure it out: localStorage saves things in “key:value” pairs, rather than full records, like most databases that I know of. At first glance, he didn’t really register this, but I showed him what the implications of this were: because we were saving key:value pairs, we needed to construct the recordset ourselves. localStorage.length returns the number of keys in the localStorage object, so we were inserting three keys for every record that we wanted to save. So you ask where I came up with the number of three: this is really important here – because it saves key:value pairs rather than full records, the length of localStorage is equal to (the number of inputs in our form) times (the number of times we’ve submitted the form). It happens to be that three is the number of inputs in our form, so the length of the localStorage object is three times longer than the number of times we’ve submitted the form!

With this in mind, we realized that the record is only complete when all the keys in one submission are accounted for, which in our case is 3 keys. This will change with the number of user inputs you have on your form. So we figured out that we only want to print every time the counter in our for loop is divisible by 3. So we needed to use the modulus operator. The modulus operator (%) returns the remainder of a division operation, in case you have never used it before. So we changed our code:

$("#showContacts").click(function(){
   for( i = 0; i < localStorage.length; i++){
     if( i % 3 == 0){
        var theRecord = "User: " + localStorage.getItem("user-" + (i / 3)) +
                        "Email: " + localStorage.getItem("email-" + (i / 3)) +
                        "Address: " + localStorage.getItem("addr-" + (i / 3));

        textNode = document.createTextNode(theRecord);

        $("#contactsDiv").appendChild(textNode);
     }
   }
});

That code constructs each of our records by dividing the counter by three every time the modulus is 0, and then uses that result as the suffix for the item in the localStorage object.

And that’s how you can use the localStorage object for full forms in HTML5! I hope you have a great day, and be sure to leave your comments and share this post!

Until next time,
Kyle Keiper