Das Dokument befasst sich mit dem Client-Side Storage in HTML5 und beschreibt dessen Motivation, Merkmale und Einsatzmöglichkeiten, wie z. B. lokale Speicherung, Offline-Nutzung und verschiedene Datenspeichertechnologien. Es vergleicht alte Speichertechniken wie Cookies mit neuen Methoden wie localStorage und IndexedDB und hebt die Bedeutung dieser Technologien für die Entwicklung benutzerfreundlicher Webanwendungen hervor. Abschließend wird auf die Browserkompatibilität und die vorhandenen Ressourcen zur Unterstützung von Entwicklern hingewiesen.

1. Client-Side Storage mit HTML 5
Frühstücksvortrag
Tom Hombergs
28.10.11

2. Inhalt
► Überblick HTML 5
► Motivation für Client-Side Storage
► HTML 5 Offline & Storage Features
► Fazit
2 Client-Side Storage mit HTML5 28.10.11

3. HTML auf der Zeitachse
CSS + HTML
1991 HTML 1994 HTML2 1996 JS 1997 4
1998 CSS 2 2000 XHTML 2005 AJAX 2009 HTML5
3 Client-Side Storage mit HTML5 28.10.11

4. HTML 5 – Featurecluster
= HTML + CSS + Javascript
Semantics Multimedia
Offline & Storage Graphics & Effects
Device Access Performance & Integration
Connectivity CSS 3
4 Client-Side Storage mit HTML5 28.10.11

5. Offline & Storage – Motivation
Warum will man Daten auf dem Client speichern?
► „Remember-Me“-Funktionalität
> Formulardaten, Anwendungszustand, Benutzer-Einstellungen
► Caching
> Server-Nutzdaten, Dateien (CSS, Javascript, Bilder)
► Offline-Modus
> Anwendung soll auch offline nutzbar sein
5 Client-Side Storage mit HTML5 28.10.11

6. Offline & Storage – Features
Web Storage
► sessionStorage: Speichern von Daten innerhalb einer Session
► localStorage: Speichern von Daten zwischen zwei Sessions
Database Storage
► Web SQL Database
► Indexed Database
Application Cache
► Caching von Dateien
Netzwerkstatus
► Erkennung des Online-Status
6 Client-Side Storage mit HTML5 28.10.11

7. Web Storage – Übersicht
Server
Client- Client- Client-
Session Session Session
Festplatte
Speichern von Informationen auf dem Client,
anstatt sie vom Server zu laden
7 Client-Side Storage mit HTML5 28.10.11

8. Web Storage – Old School
Client-Side-Storage mit HTML 4: Cookies
► Werden mit jedem HTTP-Request mit an den Server übertragen
► Dadurch Beanspruchung der Bandbreite
► Sicherheitsrisiko: Cookies werden unverschlüsselt übertragen
► Maximal 4 KB an Daten
// Daten speichern
document.cookie = “name=Max; expires=Fri, 3 Aug 2001
20:47:11 UTC; path=/”
document.cookie = “age=25; expires=Fri, 3 Aug 2001
20:47:11 UTC; path=/”
// der Wert von document.cookie ist dann:
// “name=Max; age=25”
8 Client-Side Storage mit HTML5 28.10.11

9. Web Storage – „Cookies on Steroids“
Client-Side-Storage mit HTML 5: localStorage
► >= 5 MB Speicherplatz verfügbar 3.6+
► Daten haben kein Ablaufdatum
► Daten werden nicht automatisch an Server übertragen
► Nur Zeichenketten können gespeichert werden 8+
► Analog für Daten innerhalb einer Session: sessionStorage
4+
// Daten speichern
window.localStorage.setItem(„name“,
„Max“); 10.5+
// Daten lesen
var name =
window.localStorage.getItem(“name”); 4+
9 Client-Side Storage mit HTML5 28.10.11

10. Database Storage – Web SQL Database
Web SQL Database -
► Erzeugen und SQL-Tabellen und -anfragen in Javascript
► deprecated: Spec wird nicht weiterentwickelt
-
this.db.transaction(function(tx) 4+
{
tx.executeSql("create table …“,
[], function() -
{
console.log(„done");
}
); -
});
10 Client-Side Storage mit HTML5 28.10.11

11. Database Storage – IndexedDB
IndexedDB
► Speicherung von Key/Value-Paaren 4+
► Suche nach Objekten mit bestimmten Mustern
► Asynchron
// Store erzeugen -
var store = db.createObjectStore("todo", {keyPath:
"timeStamp"});
// Objekt im Store ablegen 11+
var request = store.put({
"text": todoText,
"timeStamp" : new Date().getTime()
}); -
// Objekt aus Store laden
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
cursorRequest.onsuccess = function(e) {
-
…
};
11 Client-Side Storage mit HTML5 28.10.11

12. Application Cache
Caching von Dateien
► Manifest definiert die zu cachenden Dateien 3.6+
► Manifest-Datei wird einfach in HTML inkludiert
<!DOCTYPE html> -
<html manifest=„/myApp.manifest“>
…
CACHE MANIFEST 5+
CACHE:
myStyles.css
10.6+
myLibrary.js
FALLBACK:
lib.js fallback-lib.js 4+
#version 1.0
12 Client-Side Storage mit HTML5 28.10.11

13. Application Cache – Online-Status
Bin ich online?
► Mit navigator.onLine kann einfach geprüft werden,
ob der Browser im Offline-Modus ist
► Richtige Prüfung mit Hilfe des Manifests möglich
CACHE MANIFEST
FALLBACK:
online.js offline.js
// online.js
var online = true;
// offline.js
var online = false;
13 Client-Side Storage mit HTML5 28.10.11

14. Offline-Szenario
Im Online-Modus
► Daten an Server senden und vom Server abfragen
► Daten, die offline auch zur Verfügung stehen sollen in localStorage
speichern
► Bei neuer Manifest-Version: Dateien in den Cache laden
Im Offline-Modus
► Daten aus localStorage und Dateien aus dem Cache laden
► Daten, die eigentlich an den Server gehen sollen, in localStorage speichern
► In der nächsten Online-Sitzung localStorage-Inhalt mit Server
synchronisieren
Prominente Anwendung
► Google Mail Mobile
14 Client-Side Storage mit HTML5 28.10.11

15. Fazit zum Thema HTML5 / Offline & Storage
Browserkompatibilität
► Uneinheitliche Speichergröße von localStorage und sessionStorage
► Die gängigen Browser bieten Unterstützung für Entwickler an (Firebug & Co.)
► Wie üblich: nicht jeder Browser kann alles und einer kann am wenigsten
Unterstützung
► Zahlreiche Javascript-Bibliotheken, insb. für mobile Anwendungen
Umdenken
► (Neuer) Skill erforderlich: Javascript
► Großes Potential für Nutzerfreundliche Anwendungen
► Umdenken von Serverlogik auf clientseitige Logik
► Appell an alle Web-Entwickler: über sinnvolle Einsatzmöglichkeiten für Offline-
Unterstützung nachdenken
15 Client-Side Storage mit HTML5 28.10.11

16. Links zum Thema HTML5
► http://www.w3.org/html/logo/ – HTML5 „Marketing“-Material
► html5rocks.com – Guter Startpunkt zum Thema HTML5
► beta.html5test.com – Browserkompatibilität testen
► http://www.modernizr.com/ – Javascript Framework rund um HTML5
► dev.w3.org/html5/webstorage/ - Spezifikation Web Storage API
► www.w3.org/TR/IndexedDB/ - Spezifikation IndexedDB API
16 Client-Side Storage mit HTML5 28.10.11

17. Vielen Dank für Eure Aufmerksamkeit.
mehr HTML5 am adesso Developer Day…
info@adesso.de / www.adesso.de

18. Browser-Unterstützung
Browser-Rangliste nach http://beta.html5test.com/
► Chrome 15: 343 Punkte
► Opera 11: 296 Punkte
► Firefox 7: 298 Punkte
► Safari 5: 253 Punkte
► Internet Explorer 9: 141 Punkte
18 Client-Side Storage mit HTML5 28.10.11