Cookies & Co.: Speichermöglichkeiten im Browser

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

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 Option, 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?

hunger-413685_1280

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.

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.

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.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

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 die Möglichkeiten, die gespeicherten Inhalte darzustellen und Bedarf auch wieder zu löschen.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar