Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 1. September 2016

Cookies & Co.: Speichermöglichkeiten im Browser

Lange Zeit waren Cookies die ein­zi­ge Möglichkeit, Informationen lokal im Browser zu spei­chern. Noch heu­te wer­den sie vor allem in Kombination mit ser­ver­sei­ti­gen Sessions ver­wen­det. Doch dank HTML5 haben wir wei­te­re Option, Daten lokal im Browser abzu­le­gen. So gibt es den „Application Cache“ sowie „Web Storage“ und IndexedDB. Wofür aber gibt es die unter­schied­li­chen Speichermöglichkeiten und was kön­nen sie?

hunger-413685_1280

Mit Cookies Einstellungen und Sitzungen speichern

Cookies gab es schon zu Netscape-Zeiten. Sie wer­den bis heu­te ein­ge­setzt, um Einstellungen für Websites und Webdienste zu spei­chern oder Sitzungen – soge­nann­te Sessions – zu ver­wal­ten. Dabei ist ein Cookie eine Textdatei, in der bis zu 4 Kilobyte an Text abge­legt wer­den kann. Du kannst Cookies per JavaScript anle­gen und aus­le­gen oder aber auch ser­ver­sei­tig bei­spiels­wei­se per PHP.

Vor allem in Kombination mit Sessions spie­len sie eine gro­ße Rolle. Sei es die Anmeldung in sozia­len Netzwerken oder bei Online-Shops: Ein nach der Anmeldung gesetz­ter Cookie sorgt dafür, dass dich eine Website als Nutzer wie­der­erkennt.

Das Besondere an Cookies ist, dass sie mit einem Verfallsdatum ver­se­hen wer­den kön­nen. So haben Cookies in der Regel eine begrenz­te Lebensdauer. Wird kei­ne Lebensdauer fest­ge­legt, ver­fällt ein Cookie mit dem Schließen des Browsers.

Grundsätzlich las­sen sich Cookies nur von der Domain aus­le­sen, über die sie auch gesetzt wur­den. Es ist aber wei­ter­ge­hend mög­lich, einen Cookie auf bestimm­te Subdomains oder Verzeichnisse zu beschrän­ken.

Speichern per „Web Storage“

Mit der Einführung von HTML5 sind zwei wei­te­re Speichermöglichkeiten eta­bliert wor­den: der „Web Storage“ bestehend aus „localStorage“ und „sessionStorage“. Beide Varianten erlau­ben es, aus­schließ­lich per JavaScript Variablen und Werte im Browser zu spei­chern.

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

Während per „localStorage“ hin­ter­leg­te Daten dau­er­haft im Browser ver­füg­bar sind, blei­ben per „sessionStorage“ gespei­cher­te Daten nur bis zum Beenden des Browsers gespei­chert.

Im Gegensatz zu Cookies, wel­che eine ein­fa­che Textdatei dar­stel­len, las­sen sich hier­bei belie­big vie­le Variablen ver­ge­ben und somit unter­schied­li­che Daten spei­chern und abru­fen.

localStorage.getItem("name");

Während Cookies häu­fig in Kombination mit ser­ver­sei­tig gespei­cher­ten Session-Variablen arbei­ten, gibt es mit „localStorage“ und „sessionStorage“ eine aus­schließ­lich loka­le Speichermöglichkeit.

Komplette Websites offline speichern mit „Application Cache“

Mit HTML5 wur­de mehr Fokus auf Mobilgeräte wie Smartphones und Tablets gelegt. So hast du mit dem „Application Cache“ die Möglichkeit, eine kom­plet­te Website off­line ver­füg­bar zu machen. Dabei kannst du über eine soge­nann­te Manifest-Datei fest­le­gen, wel­che Ressourcen einer Website auf einem Gerät gespei­chert und ver­füg­bar gemacht wer­den sol­len.

CACHE MANIFEST
index.html
stylesheet.css
logo.png

Diese per „CACHE MANIFEST“ ein­ge­lei­te­te Datei ent­hält alle Dateien für den Offline-Betrieb. Einmal her­un­ter­ge­la­den, ist dann kei­ne Internetverbindung mehr not­wen­dig, um die Seite auf­zu­ru­fen. Im Gegensatz zum Browser-Cache blei­ben die Dateien dau­er­haft lokal gespei­chert – ähn­lich wie es auch bei nati­ven mobi­len Apps der Fall ist.

Die Manifest-Datei muss im „<html>“-Element der Seite refe­ren­ziert wer­den.

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

IndexedDB: Datenbank im Browser

Mit IndexedDB und WebSQL gab es zwei Ansätze, lokal im Browser ange­leg­te Datenbanken zu eta­blie­ren. Durchgesetzt hat sich schluss­end­lich IndexedDB. Im Gegensatz zum „Web Storage“, der ledig­lich das Speichern von ein­fa­chen Variablen und text­ba­sier­ten Inhalten ermög­licht, sind per IndexedDB deut­lich kom­ple­xe­re Speichermöglichkeiten vor­han­den.

Mit IndexedDB kannst du eine voll­wer­ti­ge Datenbank im Browser erstel­len, in der du nicht nur Zeichenketten, son­dern auch Zahlen und Objekte unter­bringst.

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

Im Beispiel wird eine Datenbank ange­legt. Anschließend erstellst du soge­nann­te „Stores“, in wel­che du ein­zel­ne 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 ange­legt. Anschließend wer­den zwei Indizes defi­niert, wel­che Datensätze unter­schied­lich sor­tie­ren. Per „put()“ wer­den zum Schluss die Datensätze in die Datenbank geschrie­ben.

Fazit und Entwicklerwerkzeuge

Entwicklerwerkzeuge im Chrome

Entwicklerwerkzeuge im Chrome

Wer zeit­ge­mä­ße Webanwendungen mit HTML5 ent­wi­ckelt möch­te, hat mit „Application Cache“, „Web Storage“ und IndexedDB drei Möglichkeiten, Daten auf unter­schied­li­che Weise lokal im Browser zu spei­chern und off­line ver­füg­bar zu machen. Gerade bei mobi­len Webanwendungen ist dies ein wich­ti­ger Aspekt. Serverbasierte Lösungen sind nicht nötig.

Die Entwicklerwerkzeuge aktu­el­ler Browser geben dir zudem die Möglichkeiten, die gespei­cher­ten Inhalte dar­zu­stel­len und Bedarf auch wie­der zu löschen.

(dpe)

Denis Potschien

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.

Schreibe einen Kommentar

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