HTML5 localStorage – Part Four

• Part One: Getting to Know localStorage
• Part Two: Making localStorage Work For You
• Part Three: Writing a Functioning Web App
• Part Four: Putting The Finishing Touches On

In the last post we completed a fully functional html5 web app using localStorage to store the data. So what else is there? First I think we should drop those ugly javascript alert()’s and use something that looks like it belongs in a web app, like the jQuery UI dialog()’s. Since we are allowing users to input a date, why not make it easier and add a datapicker so we don’t have to worry about what format they use. While we are at it lets style this app with some fancy new CSS3 that’s all the rave with the cool kids. Our aim for the style is an iPhone(ish) web app. First lets get into jQuery UI and adding our dialog’s and datepicker. You will need to include jqueryui as well as the theme (any theme will work, we will be using the smoothness theme that comes with the bundle).

Adding a dialog to the delete anchors on each item may seem pretty easy but I found that it took a little more work then I expected to make it work correctly. I ended up creating a deleteItem() function that looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

function deleteItem() {
    var deleteItemDialog = new Array();
    $(".delete").each(function() {
        var id = $(this).find("span").attr("id");
        deleteItemDialog[id] = $("#"+id).dialog({
            autoOpen: false,
            resizable: false,
            height: 140,
            modal: true,
            show: 'fold',
            buttons: {
                'Delete Time': function() {
                    localStorage.removeItem(id);
                    getAllItems();
                    $(this).dialog("close");
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        });
 
        $(this).click(function(){
            deleteItemDialog[id].dialog("open");
            return false;
        });
    });
}

Basically we loop through each delete anchor and create a dialog for it along with a .click event to open that dialog. We show two buttons for the dialog, Delete Time and Cancel. Click delete will remove that item from the database and reload the list calling getAllItems() and closing the dialog. With this new deleteItem function we need to adjust our timeLog html accordingly.

1

timeLog += '<li><strong>' + project + '</strong>: ' + hours + ' hours <span class="delete">&times;<span class="hidden" title="Delete Time" id="' + itemKey + '">Are you sure you want to delete ' + project + ' from the log?</span></span> <span class="date">' + date + '</span></li>';

The biggest change here is adding that extra hidden span inside the delete span. This new span has the itemKey as the id and includes the dialog message including the project name. Adding a datapicker couldn’t be easier with jQuery UI.

1
2
3
4
5
6
7

$(function() {
	$('#date').datepicker({
		showButtonPanel: true,
		showAnim: 'fold',
		dateFormat: 'm/dd/yy'
	});
});

Our input for date has an id of #date which we use to attach the datepicker. There are several options which include setting the dateFormat or showing multiple calendars. You can find more of these options in the jQuery UI docs. Now we need to update our clearLog .click event to also use a dialog. For this we will need to add a little html, a hidden div with our dialog message and replacing the .click in our javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$("#clearLog").click(function() {
    $("#clearLog-message").dialog({
        resizable: false,
        height:140,
        modal: true,
        show: 'fold',
        buttons: {
            'Delete all items': function() {
                localStorage.clear();
                getAllItems();
                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });
});

1
2
3

<div id="clearLog-message" title="Clear Log" class="hidden">
    Are you sure you want to delete all items in the log?
</div>

Clicking ‘Clear Log’ will now open a dialog and use the text inside the hidden, #clearLog-message. You will also notice that this hidden div has a title, this is used for the title of the dialog. This dialog also has two buttons, a Delete All Items which will clear the database and reload the log and a cancel. This web app is finally starting to take shape but it really needs some style. We will be using some new CSS3 items including border-radius and background gradients to achieve the look we are aiming for. I won’t go over in detail the css that is being used, as it would be better fit for a different post, so lets look at what the final web app looks like, view the full app. The full source code is also publicly available and completely opensource, you can find it on github. As a final thought, this web app was created as a learning experience and is in no way a complete web app. The code could be cleaned up and optimized and with some tweaking could be a useful app. I have some plans on extending the app and posting about it in the future. I hope this series on localStorage() has provided useful information or at the very least has you that much more excited about HTML5 and the future of the web.