Tutorials

Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.

Zurück zur Übersicht

How To: Localstorage benutzen

#Tutorials#Javascript

Localstorage ist eine neuere Methode um Daten im Browser zu speichern. Ähnlich wie ein Cookie kann man dort Verbindungsdaten, Offline Daten etc speichern. Der Vorteil von Localstorage ist unter anderem der größere Speicherplatz. Hier mal ein kleines Beispiel wie man mit Javascript Daten speichert und sich wieder aus dem Speicher holt:

Localstorage benutzen


// Daten setzen:
localStorage.setItem("key", "wert");

// Daten holen:
localStorage.getItem("key");

So kann man beispielsweise Einstellungen speichern, die ein User vorgenommen hat wie etwa die Kategorie die gerade ausgewählt wurde usw... Die Möglichkeiten sind sehr vielfältig.

Natürlich lassen sich die Daten auch wieder aus dem localstorage löschen.


// Einzelndes Item löschen:
localStorage.removeItem("key");

// Kompletten localstorage löschen
localStorage.clear();

ACHTUNG

Localstorage Werte werden so lange gespeichert, bis man diese löscht. Will man dies ähnlich wie beim Cookie beim schließen des Browsers machen könnte man folgendes verwenden:


window.onbeforeunload = function() {
  localStorage.clear();
  return '';
};

Localstorage für den Offlinebetrieb

Gerade für den Offline Betrieb bei beispielsweise mobilen Webapps bietet sich localstorage sehr an. Wenn der Browser online ist speichert er Daten, die benötigt werden einfach im Storage zwischen und ruft diese ab, wenn man im Offline Betrieb ist.

Um herauszufinden ob ein Browser on- oder offline ist kann man folgenden Code verwenden:



var isonline = navigator.onLine;

In diesem Fall ist die Variable bei Online-Betrieb "true" oder bei Offline-Betrieb false. So könnte man sagen, wenn der Browser im Offline-Betrieb ist, dann hole die Daten aus dem Localstorage, ansonsten Live aus dem Netz.

So dann viel Spaß mit Localstorage!


Kommentare

Es gibt noch keine Kommentare. Sei der Erste!

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.