JQuery Kochbuch (German Edition)

$(this).toggleClass('selected');
     sessionStorage[window.location + this.id] = $(this).hasClass('selected');
     return false;
    });
});
    Beim Laden des Dokuments wird das Objekt
sessionStorage
auf Schlüssel abgefragt, die aus der aktuellen URL und der
id
jedes der auswählbaren Quadrate bestehen. Jedes Quadrat besitzt eine CSS-Klasse, die entsprechend angewendet wird. Klickt man ein Quadrat an, wird seine Anzeige durch das Umschalten einer CSS-Klasse geändert und der Status entsprechend persistent. Dabei wird als Schlüssel eben die aktuelle URL und die
id
des aktuellen Elements genutzt.
    Diskussion
    Nutzt man das jStore-Plugin aus dem vorigen Rezept, kann man ähnliche Speichermechanismen auf Client-Seite für eine Session erhalten. Mit jStore haben Sie den Vorteil der Browser-übergreifenden Kompatibilität. Dieses Rezept funktioniert nur im Internet Explorer 8.0 und in Firefox 2.0 (und höher). Safari 3.1 unterstützt dieses Feature nicht, allerdings kann es sein, dass zukünftige Versionen eine entsprechende Unterstützung anbieten werden.
    Die DOM Storage APIist dann sehr nützlich, wenn eine breite Browser-Unterstützung nicht notwendig ist. Das kann bei Anwendungen der Fall sein, die für Firmen-Intranets entwickelt werden. Zudem ist die API Teil der kommenden HTML5-Spezifikation. In Zukunft wird die Verfügbarkeit also sehr wahrscheinlich höher sein. Das Verwenden einer schon eingebauten Storage API hat den Vorteil, dass man sich nicht mit zusätzlichem JavaScript-Code herumschlagen muss. Das minifizierte jStore-Plugin und die Flash-Komponente
jStore.swf
sind 20 KB groß.

Den Anwendungs-Status über eine Session hinaus speichern
    Problem
    Sie wollen Daten auch zwischen Sessions auf dem Client speichern. In Auf dem Client speichern wird der Status der Todo-Liste zwischen zwei Sessions persistiert. Dieses Rezept zeigt, wie man eine ähnliche Funktionalität ohne das jStore-Plugin erzielen kann.
    Lösung
    Der HTML-Teil der Lösung entspricht dem aus Auf dem Client speichern . Der JavaScript-Code sieht wie folgt aus:
(function($) {
    $('document').ready(function() {
     if( window.localStorage ) { appStorage = window.localStorage; }
     else { appStorage = globalStorage[location.hostname]; }

     var listHtml = appStorage['task-list'];
     $('#task-list').append(listHtml.value ? listHtml.value : listHtml);
    Das erstmalige Einrichten ist etwas umfangreicher als die auf jStore basierende Lösung. Firefox bietet eine nicht-standardkonforme Implementierung des Storage-Bereichs für langfristiges Speichern der DOM Storage API. Es verwendet das Array
globalStorage
zum Speichern von Daten zwischen Sessions – im Gegensatz zum Objekt
localStorage
. Jedes Storage-Objekt im Array
globalStorage
wird mit einem Schlüssel versehen, der der Domain des aktuellen Dokuments entspricht. Dieser Code wird
localStorage
nutzen, wenn es zur Verfügung steht. Ansonsten greift er doch auf
globalStorage
zurück.
    Im nächsten Codeabschnitt wird die ungeordnete Liste mit allen bestehenden Aufgaben gefüllt. Im auf jStore basierenden Beispiel war das gerade eine Zeile Code. Die zusätzliche Komplexität in dieser Lösung entsteht durch das Verhalten von Firefox.
localStorage
gibt einen String zurück. Aber greift man auf
globalStorage
zu, wird ein Objekt mit den zwei Attributen
value
und
secure
zurückgegeben. Falls vorhanden, wird das Attribut
value
genutzt. Ansonsten geht der Code davon aus, dass
localStorage
einen String zurückgeliefert hat.
$('#task-add').click(function() {
     var task = $('#task-input').val();
     var taskHtml = '

erledigt ' + task + '

';
     appStorage['task-list'] = $('#task-list').append(taskHtml).html();
     return false;
     });

     $('#list-clear').click(function() {
     $('#task-list').empty();
     appStorage['task-list'] = '';
     return false;
     });

     $('#task-list a').live('click',function() {
     $(this).parent().remove();
     appStorage['task-list'] = $('#task-list').html();
     return false;
     });
    });
})(jQuery);
    Mit dem Rest des Codes werden neue Aufgaben hinzugefügt, mit »erledigt« markierte Aufgaben entfernt und die Aufgabenliste gelöscht, indem die entsprechenden Events wie im vorigen auf jStore basierenden Rezept an die DOM-Elemente gebunden werden. Aber anstatt die jStore-Funktionen zum Verändern der persistierten Daten zu nutzen, können die Werte im weiter vorne erzeugten
appStorage
-Objekt direkt angesprochen werden. Damit kann der Code zum Entfernen einer Aufgabe vereinfacht