Time for action – loading the task list

Now that we've saved the new data model to localStorage we need to update the loadTaskList() method to load the data:

function loadTaskList()
{
    var tasks = appStorage.getValue("taskList");
    taskList = new TaskList(tasks);
    rebuildTaskList();
}

First we get the task array from localStorage and pass that as a parameter into the TaskList object's constructor. Then we call a new method, rebuildTaskList() to create the task elements in the DOM:

function rebuildTaskList()
{
    // Remove any old task elements
    $("#task-list").empty();
    // Create DOM elements for each task
    taskList.each(function(task)
    {
        addTaskElement(task);
    });
}

First we remove any old elements from the task list element using the jQuery empty() method. Then we use the each() method that we implemented in the TaskList object to iterate over the tasks and call addTaskElement() for each one to build the task elements.