Offline – damit eine App in jedem Winkel der Welt funktioniert - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 285

Der EventListener bezieht sich auf alle Checkboxen innerhalb der Liste #todo-liste .
Sobald eine Veränderung eintritt, also ein change , ruft dieser die Funktion
changeTaskState auf.

Ihre App kann nun bereits Aufgaben anlegen und abhaken bzw. löschen. Sobald Sie
die App schließen und erneut aufrufen, ist die Liste aber leer. Sie müssen also beim
App-Start die Einträge des localStorage auslesen und der Liste hinzufügen:

$(function(){
if(localStorage.length > 0) {
for(id in localStorage) {
$('#todo-liste').append('<li id="'+ id +'">'+localStorage[id]+'</li>');
}
}
$('#todo-liste').find('li').prepend('<input type="checkbox">').wrapIn-
ner('<label></label>');
});

7

Der bekannte jQuery-Rumpf $(function(){ … }); sorgt dafür, dass die Funktion aus-
geführt wird, sobald die WebApp und die jQuery-Bibliothek geladen sind. Es wird
überprüft, ob überhaupt Einträge vorhanden sind, also ob die WebApp schon einmal
gestartet wurde und ob Todos angelegt wurden. Ist dies der Fall, werden die Einträge
ausgelesen und der Liste #todo-liste angehängt. Nachdem die Liste befüllt wurde,
bekommen alle Einträge noch ein Checkbox-Element vorangestellt.

Abbildung 7.10 Ihre fertige Todo-App unter iOS