Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

jQuery Mobile in Zusammenarbeit mit HTML5: Local Storage

Im letzten Teil des jQuery Mobile/HTML5-Tutorials ging es um die HTML5-Geolocation und das Anzeigen des aktuellen Standortes auf einer Google-Maps-Karte. Nun möchte aber der geneigte App-Anwender nicht nur seinen jetzigen Standort sehen, sondern vielleicht auch seinen vorherigen. Wie das funktioniert, soll dieses Tutorial zeigen.

Auch für das lokale Speichern, also das Speichern von Daten im Browser des Nutzers, bietet HTML5 eine eigene Spezifikation: „Local Storage“. Dabei ist der Umgang mit dem Local Storage nicht wirklich kompliziert. Doch die Probleme verstecken sich mal wieder in den Browsern. Jeder Browser setzt die Spezifikation auf seine eigene Art oder eben auch gar nicht um. In den modernen Browser sollte Local Storage aber funktionieren.

jQuery Plugin - jStorage

Es gibt aber ein jQuery-Plugin, das uns die Arbeit vereinfacht und die Funktionalität sichert: jStorage. Dieses Plugin werde ich in meinem Tutorial nutzen um euch die Funktionsweise von HTML5 Local Storage demonstrieren zu können.

Im letzten Tutorial haben wir bereits eine Seite in jQuery Mobile angelegt. Diese wollen wir nun weiter nutzen. Alles was wir tun müssen, ist nur noch etwas JavaScript hinzuzufügen.

Speichern von Daten mit Local Storage

Wir können nun folgendes der Funktion geolocation_action hinzufügen:

jQuery.jStorage.set("latitude", position.coords.latitude);
jQuery.jStorage.set("longitude", position.coords.longitude);

Damit speichern wir im Local Storage die aktuellen Position. Und mit Hilfe der folgenden Funktion können wir diese auch abrufen:

latitude = jQuery.jStorage.get("latitude");
longitude = jQuery.jStorage.get("longitude");

Damit haben wir in den Variablen longitude und latitude die jeweiligen Werte. Das wir das Ganze aber auch noch viel sauberer lösen können werdet ihr gleich sehen, aber zuerst möchte ich euch die Theorie dahinter erklären:

Die Funktion "set" hat folgenden Aufbau:

jQuery.jStorage.set("key", "value");

Man legt also wie bei einem Datenfeld eine Datenmenge mit einem Schlüssel ("key") und dem Wert ("value") an.Value kann dabei entweder normaler Text, JSON oder ein Array sein. Anschließend werden die Daten im Local Storage des Browsers gespeichert und mit der get-Funktion können wir uns den Wert mit Hilfe des Keys holen: 

jQuery.jStorage.get("key");

Wichtig hierbei ist, dass der Schlüssel immer in Anführungszeichen stehen, außer ihr nutzt eine Variable.

Wenn wir unser Beispiel nun verbessern wollen, sollten wir nicht nur den letzten Eintrag speichern, sondern auch vorherige Einträge. Dazu werden wir eine spezielle Eigenschaft der get-Funktion nutzen. Wir können neben dem Key auch einen Default-Wert setzen. Dieser wird einer Variablen zugewiesen, wenn der Key im Local Storage nicht vorhanden ist.

Zum Speichern im Local Storage können wir durch die Hilfe von jStorage ein Array nutzen. Das bedeutet, wir speichern in den Local Storage ein Array und lesen dieses wieder aus. Wenn das Array noch nicht vorhanden ist, legen wir zuerst eins an. Ist es aber bereits vorhanden, nehmen wir uns dieses Array und hängen den neuen Datensatz an das Array per push-Funktion an und speichern das neue Array wieder im Local Storage. (Inspiriert von lundner.com).

Im Klartext bedeutet das, wir erweitern die Funktion geolocation_action mit folgendem Code :

geodaten = $.jStorage.get("geodaten", new Array());

geodaten.push({
    latitude: position.coords.latitude,
    longitude: position.coords.longitude
    })
jQuery.jStorage.set("geodaten", geodaten);

In der ersten Zeile holen wir uns die Daten mit dem Key geodaten aus dem Local Storage. Wenn dieser Key nicht vorhanden ist, dann wird in der Variablen geodaten ein neues Array angelegt.

Das heißt wir haben nun in geodaten ein Array, entweder mit oder ohne Daten. Durch push speisen wir in das Array unsere Daten an das Ende ein und mit set speichern wir das Ganze wieder im Local Storage.

Auslesen der letzten Standortdaten

Desweiteren legen wir uns eine neue Funktion im Script-Teil an mit dem folgenden Inhalt:

function storage_get(){
   geodaten = jQuery.jStorage.get("geodaten", new Array());
   latitude = geodaten[geodaten.length-1]["latitude"];
   longitude = geodaten[geodaten.length-1]["longitude"];

   var browserbreite = 200;
   var karte_url = "http://maps.google.com/maps/api/staticmap?sensor=true&center="+ latitude +","+ longitude +"zoom=15&size="+ browserbreite +"x250&markers=color:red|label:A|"+ latitude +","+ longitude;

   jQuery("#karteStand").remove();
   jQuery("#karteStandort").append(
   jQuery(document.createElement("img")).attr("src", karte_url).attr('id','karteStand')
            );
        }

Die Funktion ist fast selbsterklärend. Zuerst lesen wir die Daten mit set aus dem Local Storage und speichern diese in der Variablen geodaten. In den Variablen latitude und longitude nehmen wir uns die entsprechenden Werte aus dem Local Storage. Da wir den letzten Eintrag bekommen möchten, nehmen wir als Key einfach die Länge des Arrays - 1, bekommen somit den letzten Eintrag, da das Indizieren von Arrays bei 0 beginnt.

Als Letztes wird, wie im vorherigen Tutorial bereits erklärt, die URL für die Karte erstellt, alle eventuell vorhanden Karten gelöscht und eine neue Karte mit Hilfe von .append() angezeigt.

Damit der Button „Anzeigen“ auf der zweiten Seite auch eine Funktion erhält, legen wir am Anfang des Script-Teils noch einen Funktionsaufruf für das Click-Event fest:

        jQuery(window).ready(function(){
            jQuery("#btneinchecken").click(geolocation_starten);
            jQuery("#btnstandort").click(storage_get);
        });

Wenn ihr nun mit eurem Gerät auf der Seite eincheckt, werden die Daten im Local Storage gespeichert und wenn ihr euch die letzten Daten anzeigen wollt, seht ihr nun die Karte mit dem letzten Standort, den ihr eingecheckt habt.

jQuery Mobile Local Storage
jQuery Mobile Local Storage

Im nächsten Tutorial werden wir das Beispiel weiter ausbauen und die Möglichkeit schaffen durch die Standorte zu blättern und wir werden auch untersuchen, wie wir den Weg eines Nutzers verfolgen können.

Den kompletten Quellcode findet ihr in den Links.

Was denkt ihr über Local Storage ? Ist es eine gute Alternative zum Speichern der Daten auf dem Server, sodass Daten auch beim Client bleiben können oder unterstützt ihr lieber die SQLite-Variante von Safari?

Die aktuellen News auf t3n zu den Themen jQuery und HTML5:

Bitte beachte unsere Community-Richtlinien

4 Reaktionen
Anja

Schönes Tutorial, leider funktioniert bei mir das Anzeigen der gespeicherten Karten nicht.
Zuerst dachte ich, dasss jQuery("#btnstandort").click(storage_get); eigentlich jQuery("#letzterStandortanzeigen").click(storage_get); heißen sollte, aber auch dann funktioniert es nicht. Der Link zu dem kompletten Code ist mitlerweile abgelaufen.
ich wüsste gerne, woran es liegen könnte. Vielen Dank schon mal im voraus.
Anja

Internet Marketing

HTML5 is the latest version of HTML and Search Engines give higher priority to HTML5 sites in ranking...

Sven Schannak

@ Jan: Danke für die Fehlermeldung, ist bereits bereinigt ;)

Jan

Im ersten Code-Snippet steht zwei mal die selbe Zeile - in der zweiten sollte besser "longitude" statt wieder "latitude" verwendet werden. ;)

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst