A Simple Todo App Using HTML5 and localstorage
HTML5 has brought great potential to the web applications of the future. But what about simple apps that don’t even need internet, such as your to-do list? Now that local storage is implemented by all major browsers, you can easily leverage this feature to build simple apps for personal use.
|View Demo||Share on Twitter|
This post will show you how to build a simple HTML5 and local storage powered to-do list. However, keep in mind that I’m only trying to show what can be accomplished with HTML5, so the code may not be perfect.
The localStorage API
The API that we’ll be using is simple. To set a value in local storage, we use
localStorage.setItem() to save a task, and
localStorage.removeItem() to delete one. The number of local storage items can be found by
The HTML markup
This to-do app consists of just one text input field and an unordered list. The initial HTML markup required for the form and the task list looks like this:
The first part of the above code loops through the tasks stored in local storage. The items are stored with the key, item-n, where n ranges from 1 to the size of the array.
The second part responds to form submission. When the user enters something into the text box and hits enter, the content gets appended as a list item to the <ul>.
On clicking the delete link, the item corresponding to that is removed, and then, looping over the list, the task keys are numbered again starting from task-1.
To edit the tasks, we could probably use the contenteditable attribute. I will hopefully write another post very soon about how to make the list editable.
Update. Koes Bong added a lot of features features to this app and his version is available here.