A Simple Todo App Using HTML5 and localstorage

04 Dec 2010

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.

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 localStorage.length.

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:

<formid="tasks-list"><inputid="task"></form><ulid="tasks"></ul>

The JavaScript

This is the JavaScript I used to load the tasks from local storage initially.

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.

Improvements

The list needs to be editable, and you will probably want to reorder it as well. With this post I only wanted to show how easy it is to get started with creating such simple apps using HTML5 and JavaScript, It’s probably not really very well written JS code (I don’t know enough to know if it’s any good.).

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.

Hi, I’m Nithin Bekal.
I work at Shopify in Ottawa, Canada.
Previously, co-founder of
CrowdStudio.in and
WowMakers.
Ruby is my preferred programming language,
and the topic of most of my articles here,
but I'm also a big fan of Elixir.
Tweet to me at @nithinbekal.