HTML5 Web Application Development By Example Beginner's guide

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