HTML5 Web Application Development By Example Beginner's guide

Time for action – storing the tasklist

Let's get back to the tasklist application. First we'll add a reference to appStorage.js in our HTML file:

<script src="appStorage.js"></script>

Next we'll add a private appStorage variable to the TaskAtHandApp object, passing in the name of the application to the constructor:

function TaskAtHandApp()
{
    var version = "v1.3",
        appStorage = new AppStorage("taskAtHand");
    //…
}

Now let's add a private method that can be called to save the tasks whenever a change is made:

function saveTaskList()
{
    var tasks = [];
    $("#task-list .task span.task-name").each(function() {
        tasks.push($(this).text())
    });
    appStorage.setValue("taskList", tasks);
}

The saveTaskList() method finds all of the task name <span> elements for each task ...