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.
You should now have a good idea of how you can use localStorage yourself. However I promised we would create a simple html5 web app and thats what we are going to do. In this post we are going to get our app setup and ready for use. This means it will allow a user to create new entries in their database, display all the entries and allow them to delete a specific entry or remove all entries. In this post we won’t focus on the design of the app but rather making it functional. Part Four will cover the final steps including the design and adding some fancy css3. So, why am I still talking when you are here to see some code?
First we will take what we learned in the last post and write the function that will allow a user to create a new database entry. In this case, since we are creating a time tracking app, it means adding an item to the time log including project name, hours spent and the date. This means we are going to need a pretty simple form along with some code to run on submit that will store the item in the database. I will be using some jQuery for this code.
For this Time Tracking web app we are going to allow you to input a project name, hours spent working on that project and the date. Now these three values will need to be stored together with the same key and following the simple method used in Part One won’t work. However this is a lot easier then you might think. You will create a new array and store those three values. Then with a .join() when saving the item it will give you those three values stored in the database under whatever key you want. In our case we are going to keep it simple and make key an id. First lets get our values ready. Since the key will be a unique id we will grab the current date and get the number of milliseconds since January 1, 1970. This will give us a unique id for each item in the database.