Beispiel-Rezepte in diesem Kapitel zeigen, wie jQuery genutzt werden kann, um die Bedürfnisse grundlegenderer und interaktiverer Web-Inhalte zu erfüllen. Die ersten drei Rezepte behandeln die verschiedenen Methoden, mit denen Daten in einem Web-Browser bewahrt werden.Danach folgen Rezepte, die den Umgang mit Ajax und JavaScript vereinfachen sollen, wenn die Menge an Code und Daten in Ihrer Anwendung wächst.

Auf dem Client speichern
    Problem
    Sie schreiben eine Rich Internet Application, die größere Mengen an Benutzerdaten im Web-Browser verarbeitet. Die Daten sollen aus Performance-Gründen oder zur Offline-Arbeit auf dem Rechner des Anwenders zwischengespeichert werden.
    Lösung
    Eine einfache Todo-Liste soll als Beispiel für das Speichern auf dem Client dienen. Wie bei vielen Rezepten in diesem Kapitel wird ein jQuery-Plugin genutzt werden, um die Unterschiede zwischen den Browsern auszubügeln:


    
    
    



    

17.1 - Auf dem Client speichern

    

Storage-Engine:

    
    
    
    

    Der HTML-Code besteht aus Form-Elementen, mit denen die Todo-Liste bearbeitet werden kann: Ein Textfeld, um eine Aufgabe einzugeben, sowie Buttons, um eine Aufgabe hinzuzufügen und alle Aufgaben zu löschen. Die eingegebenen Aufgaben werden als ungeordnete Liste ausgegeben:
(function($) {
    $.jStore.ready(function(ev,engine) {
     engine.ready(function(ev,engine) {
     $('#storage-engine').html($.jStore.CurrentEngine.type);
     $('#task-list').append($.store('task-list'));
     });
    });
    Das Plugin jStorebietet zwei Callbacks an:
jStore.ready()
und
engine.ready()
. So wie die jQuery-Funktion
ready()
erlauben es uns diese Funktionen, eigene Schritte durchzuführen, sobald jStore bereit und die gewählte Storage Engine mit ihren Initialisierungsschritten fertig ist. Diese Einsprungpunkte werden genutzt, um die aktuelle Storage Engine und alle abgespeicherten Elemente auf der Seite anzuzeigen:
$('document').ready(function() {
     $('#task-add').click(function() {
     var task = $('#task-input').val();
     var taskHtml = '

erledigt ' + task + '

';
     $.store('task-list',$('#task-list').append(taskHtml).html());
     return false;
     });
    Ist das Dokument fertig, dann werden Click-Events an die entsprechenden Steuerelemente gebunden. Wird der Button »Aufgabe hinzufügen« angeklickt, bauen wir ein List-Item-Element mit dem Inhalt des Aufgaben-Textfeldes und einem Link, um die Aufgabe als erledigt zu markieren. Das List-Item wird dann an den Inhalt der Aufgabenliste angehängt und diese Liste im lokalen Speicherbereich mit dem Schlüssel
task-list
abgelegt. Später kann die Liste dann mit diesem Schlüssel wieder ausgelesen werden, so wie es auch im Callback
engine.ready()
geschieht:
$('#list-clear').click(function() {
     $('#task-list').empty();
     $.remove('task-list');
     return false;
     });
    Wird der Button »Alle Aufgaben entfernen« angeklickt, dann wird das Element mit der Todo-Liste geleert. Der Schlüssel
task-list
und der dazugehörige Wert werden dann aus dem lokalen Storage entfernt:
$('#task-list a').live('click',function() {
     $(this).parent().remove();
     var taskList = $('#task-list').html();
     if( taskList ) { $.store('task-list',taskList); }
     else { $.remove('task-list'); }
     return false;
     });
});
})(jQuery);
    Schließlich wird ein
live
-Event an die
done
-Links jedes einzelnen Elements in der Todo-Liste gebunden. Durch Verwenden der Funktion
live()
anstatt
bind()
oder einer Kurzform wie
click()
wird an alle Elemente, die zu
#task-list a
passen, das Click-Event gebunden, selbst an Elemente, die beim Aufruf von
live()
noch gar nicht vorhanden sind. Dadurch können wir »erledigt«-Links für jedes neue Element einfügen, ohne das Click-Event bei jedem Einfügen neu zuzuweisen.
    Wenn ein Element als erledigt markiert wird, entfernen wir es aus der Liste und speichern die aktualisierte Liste im lokalen Storage mit dem Schlüssel
task-list
. Man muss allerdings ein bisschen aufpassen, wenn man die aktualisierte Liste speichert:
if( taskList ) {