Categories
Programmierung Webdesign

Lokale Datenhaltung: So speicherst du mit Cookies & Co im Browser

Lange Zeit waren Cookies die einzige Möglichkeit, Informationen lokal im Browser zu speichern. Noch heute werden sie vor allem in Kombination mit serverseitigen Sessions verwendet. Doch dank HTML5 haben wir weitere Optionen, Daten lokal im Browser abzulegen. So gibt es den „Application Cache“ sowie „Web Storage“ und IndexedDB. Wofür aber gibt es die unterschiedlichen Speichermöglichkeiten und was können sie?

Anzeige

Mit Cookies Einstellungen und Sitzungen speichern

Cookies gab es schon zu Netscape-Zeiten. Sie werden bis heute eingesetzt, um Einstellungen für Websites und Webdienste zu speichern oder Sitzungen – sogenannte Sessions – zu verwalten. Dabei ist ein Cookie eine Textdatei, in der bis zu 4 Kilobyte an Text abgelegt werden kann. Du kannst Cookies per JavaScript anlegen und auslegen oder aber auch serverseitig beispielsweise per PHP.

Vor allem in Kombination mit Sessions spielen sie eine große Rolle. Sei es die Anmeldung in sozialen Netzwerken oder bei Online-Shops: Ein nach der Anmeldung gesetzter Cookie sorgt dafür, dass dich eine Website als Nutzer wiedererkennt.

hunger-413685_1280

Das Besondere an Cookies ist, dass sie mit einem Verfallsdatum versehen werden können. So haben Cookies in der Regel eine begrenzte Lebensdauer. Wird keine Lebensdauer festgelegt, verfällt ein Cookie mit dem Schließen des Browsers.

Grundsätzlich lassen sich Cookies nur von der Domain auslesen, über die sie auch gesetzt wurden. Es ist aber weitergehend möglich, einen Cookie auf bestimmte Subdomains oder Verzeichnisse zu beschränken.

Speichern per „Web Storage“

Mit der Einführung von HTML5 sind zwei weitere Speichermöglichkeiten etabliert worden: der „Web Storage“ bestehend aus „localStorage“ und „sessionStorage“. Beide Varianten erlauben es, ausschließlich per JavaScript Variablen und Werte im Browser zu speichern.

Anzeige
localStorage.setItem("name", "Manfred");
sessionStorage.setItem("name", "Manfred");

Während per „localStorage“ hinterlegte Daten dauerhaft im Browser verfügbar sind, bleiben per „sessionStorage“ gespeicherte Daten nur bis zum Beenden des Browsers gespeichert.

Im Gegensatz zu Cookies, welche eine einfache Textdatei darstellen, lassen sich hierbei beliebig viele Variablen vergeben und somit unterschiedliche Daten speichern und abrufen.

localStorage.getItem("name");

Während Cookies häufig in Kombination mit serverseitig gespeicherten Session-Variablen arbeiten, gibt es mit „localStorage“ und „sessionStorage“ eine ausschließlich lokale Speichermöglichkeit.

Komplette Websites offline speichern mit „Application Cache“

Mit HTML5 wurde mehr Fokus auf Mobilgeräte wie Smartphones und Tablets gelegt. So hast du mit dem „Application Cache“ die Möglichkeit, eine komplette Website offline verfügbar zu machen. Dabei kannst du über eine sogenannte Manifest-Datei festlegen, welche Ressourcen einer Website auf einem Gerät gespeichert und verfügbar gemacht werden sollen.

CACHE MANIFEST
index.html
stylesheet.css
logo.png

Diese per „CACHE MANIFEST“ eingeleitete Datei enthält alle Dateien für den Offline-Betrieb. Einmal heruntergeladen, ist dann keine Internetverbindung mehr notwendig, um die Seite aufzurufen. Im Gegensatz zum Browser-Cache bleiben die Dateien dauerhaft lokal gespeichert – ähnlich wie es auch bei nativen mobilen Apps der Fall ist.

Die Manifest-Datei muss im „<html>“-Element der Seite referenziert werden.

<html manifest="http://www.example.com/manifest.mf">

IndexedDB: Datenbank im Browser

Mit IndexedDB und WebSQL gab es zwei Ansätze, lokal im Browser angelegte Datenbanken zu etablieren. Durchgesetzt hat sich schlussendlich IndexedDB. Im Gegensatz zum „Web Storage“, der lediglich das Speichern von einfachen Variablen und textbasierten Inhalten ermöglicht, sind per IndexedDB deutlich komplexere Speichermöglichkeiten vorhanden.

Mit IndexedDB kannst du eine vollwertige Datenbank im Browser erstellen, in der du nicht nur Zeichenketten, sondern auch Zahlen und Objekte unterbringst.

var request = indexedDB.open("beispiel", 1);

Im Beispiel wird eine Datenbank angelegt. Anschließend erstellst du sogenannte „Stores“, in welche du einzelne Datensätze ablegst.

request.onupgradeneeded = function() {
  var db = request.result;
  var store = db.createObjectStore("artikel", {keyPath: "id"});
  var titel_index = store.createIndex("nach_titel", "titel", {unique: true});
  var autor_index = store.createIndex("nach_autor", "autor");
  store.put({title: "HTML5 und CSS3", author: "Denis", id: 123456});
  store.put({title: "Mobile Apps", author: "Dieter", id: 234567});
};
request.onsuccess = function() {
  db = request.result;
};

Hier wird ein „Store“ mit Artikeln angelegt. Anschließend werden zwei Indizes definiert, welche Datensätze unterschiedlich sortieren. Per „put()“ werden zum Schluss die Datensätze in die Datenbank geschrieben.

Fazit und Entwicklerwerkzeuge

Entwicklerwerkzeuge im Chrome
Entwicklerwerkzeuge im Chrome

Wer zeitgemäße Webanwendungen mit HTML5 entwickelt möchte, hat mit „Application Cache“, „Web Storage“ und IndexedDB drei Möglichkeiten, Daten auf unterschiedliche Weise lokal im Browser zu speichern und offline verfügbar zu machen. Gerade bei mobilen Webanwendungen ist dies ein wichtiger Aspekt. Serverbasierte Lösungen sind nicht nötig.

Die Entwicklerwerkzeuge aktueller Browser geben dir zudem Möglichkeiten, die gespeicherten Inhalte darzustellen und, bei Bedarf, auch wieder zu löschen.

(Beitragsbild: Bambo/Pixabay)

Schreibe einen Kommentar

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