Doch nicht nur Plan B (Teil 3)
Kommentare

Clientseitige Datenspeicherung

Neben der in Webprojekten üblichen Speicherung von Daten auf der Serverseite, also dem Handover der Daten an eine serverseitige Anwendung, die wiederum die Daten in einem

Clientseitige Datenspeicherung

Neben der in Webprojekten üblichen Speicherung von Daten auf der Serverseite, also dem Handover der Daten an eine serverseitige Anwendung, die wiederum die Daten in einem meist relationalen Datenbankmanagementsystem speichern, gibt es seit HTML 5 neue Möglichkeiten zur Speicherung auf der Clientseite. Neben der Tatsache, dass noch viel Zeit vergehen wird, bevor ein finaler Stand von HTML 5 verabschiedet wird, sind HTML 5-fähige Browser leider noch nicht weit genug verbreitet, sodass sich dieser Quasi-Standard im Internet noch nicht richtig etablieren konnte. Zum Glück deckt der Safari Mobil auf dem iPhone eine große Palette der aktuellen HTML-5-Features ab. Die wohl wichtigste Neuerung für den Safari Mobil, die mit HTML 5 kommt, ist sicherlich die Speicherung von Daten auf der Clientseite. Daten können dann in einem so genannten localStorage– oder einem sessionStorage-Objekt sowie in einer lokalen Datenbank abgelegt werden. Diese drei Varianten sollen im Folgenden kurz erläutert werden.

Bei der Speicherung im localStorage– oder sessionStorage-Objekt handelt es sich um die Speicherung der Daten in Key-Value-Paaren, ähnlich wie bei Cookies. Der große Unterschied zu Cookies ist jedoch, dass die Daten nicht über das Internet übertragen, sondern lediglich auf dem Client abgelegt werden. Zudem ist die Datenmenge, die in den Objekten abgelegt werden kann, größer als bei Cookies. Die beiden Speichermethoden unterscheiden sich lediglich in deren Persistenz und in deren Verfügbarkeit. SessionStorage speichert die Daten nur für die aktuelle Session und löscht diese wieder nach dem Schließen des Browsers. Wohingegen localStorage die Daten auch nach dem Schließen des Fensters vorhält. Die Anwendungsfälle sind demnach unterschiedlicher Natur. SessionStorage verwendet man für die Speicherung nur kurzfristig benötigter Daten, wohingegen localStorage eher Verwendung bei einer langfristigen Datensicherung, z. B. für die Speicherung von Anwendungspräferenzen, eingesetzt wird. Die Speicherung in einem localStorage-Objekt, das Auslesen oder das Entfernen des Objekts mittels JavaScript ist sichtlich einfach. Um die Beispielanwendung übersichtlich zu halten, wurde der gesamte JavaScript-Code in eine externe Datei ausgelagert und in der index.html entsprechend referenziert (Listing 3).

var jQT = $.jQTouch({
    icon: 'myIcon.png',
    statusBar: 'black'
});
$(document).ready(function(){
    $('#settings form').submit(storeSettings);
});
function storeSettings() {
    localStorage.make = $('#make').val();
    localStorage.model = $('#model').val();
    localStorage.badge = $('#badge').val();
    jQT.goBack();
    return false;
}  

Nach der Initialisierung des jQT-Objekts im Konstruktor wird die Standard-Submit-Funktion überschrieben und stattdessen die Funktion storeSettings() aufgerufen. Mithilfe der jQuery val()-Funktion werden die Werte aus den Formularfeldern ausgelesen und an das localStorage-Objekt übergeben. Die jQuery-Funktion goBack() leitet den User zurück auf das vorherige Panel. Return false unterbindet an dieser Stelle, dass die Standard-Action-Funktion des Formulars ausgeführt und die Seite erneut geladen wird. Ähnlich einfach funktioniert das Auslesen der Daten aus dem localStorage-Objekt, dass in der Funktion loadSettings() dargestellt wird:

function loadSettings() {

psenv::pushli();$env->object_param[0]=“‚#make'“; eval($_oclass[„“]); psenv::popli(); ?>

.val(localStorage.make);

psenv::pushli();$env->object_param[0]=“‚#model'“; eval($_oclass[„“]); psenv::popli(); ?>

.val(localStorage.model);

psenv::pushli();$env->object_param[0]=“‚#badge'“; eval($_oclass[„“]); psenv::popli(); ?>

.val(localStorage.badge); }

Die Verarbeitung von Daten in einem sessionStorage-Objekt funktioniert ähnlich und wird daher nur exemplarisch aufgeführt:

var test = sessionStorage.variablenname; sessionStorage.variablenname = test;

Viel spannender wird es aber mit der Speicherung der Daten in einer lokalen Datenbank. Local Storage in HTML 5 und damit auch auf dem iPhone ist im Grunde nichts anderes als die clientseitige relationale Datenspeicherung mittels JavaScript Database API. Der aktuell einzige Browser, der die clientseitige Speicherung in einer lokalen Datenbank unterstützt, ist Safari und damit auch Safari Mobil auf dem iPhone. Safari nutzt als Daten-Backend die SQL-Datenbank SQLite. Das Thema clientseitige Datenbanken ist sehr umfangreich und kann daher nur angerissen werden. Im Folgenden sollen kleine Beispiele das Prinzip des clientseitigen Datenbankzugriffs verdeutlichen. Bevor nun die Daten der Anwendung in der Datenbank gespeichert werden können, müssen diese angelegt werden. Nach der Definition der Objektvariablen db und einiger Variablen für diverse Parameter der Datenbank, wird die maximale Größe angegeben, auf die die Datenbank aller Voraussicht nach wachsen wird. Die Größe wird in Kilobytes angegeben und liegt auf dem iPhone zurzeit standardmäßig bei 5 MB. Im nächsten Schritt wird die Datenbank geöffnet bzw. erzeugt, sofern diese noch nicht existiert. Da alle Datenbankanfragen im Kontext einer Transaktion stattfinden müssen, wird zunächst die Transactions-Methode aufgerufen. Die der Transactions-Methode als Parameter übergebene anonyme Funktion führt mittels der Methode executeSQL() das SQL-Statement zum Anlegen der Tabelle „fuelstops“ aus (Listing 4).

var db;
var shortName = 'Fuelstop';
var version = '1.0'; 
var displayName = 'Fuelstop'; 
var maxSize = 65536;
db = openDatabase(shortName, version, displayName, maxSize);
db.transaction(
      function (transaction) {
          transaction.executeSql(
          'CREATE TABLE IF NOT EXISTS fuelstops ' +
        '  (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
        '  date DATE NOT NULL, currentkm INTEGER NOT NULL, ' +
        '  amount INTEGER NOT NULL );'
          );
      }
   );  
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -