Das Dokument behandelt verschiedene HTML5-Speicherlösungen wie LocalStorage, Web SQL und IndexedDB, die zur Speicherung von Nutzerdaten und für Offline-Anwendungen verwendet werden können. Es beschreibt die Vor- und Nachteile aktueller Technologien, inklusive der Herausforderungen beim synchrone Zugriff und der Notwendigkeit von Workers zur Verbesserung der Reaktionsfähigkeit. Zudem werden Links zu weiterführenden Ressourcen bereitgestellt.

1. OPEN TECH TALK #4 NOVEMBER 2011
HTML5 Storage Solutions
Simon Jockers
jockers@htw-berlin.de

2. LocalStorage – Wofür?
 Speichern von Nutzerdaten
 Caching von Assets
 Entwicklung von Offline-Anwendungen

3. Gmail Offline

4. Financial Times

5. chrome.angrybirds.com

6. Old School: Cookies
 Nur geeignet für geringe Datenmengen:
 4096 Bytes pro Cookie
 20 Cookies pro Domain
 Alle Cookies werden bei jedem Request
zwischen Server und Client ausgetauscht.

7. Web Storage
 Einfacher Key-Value-Store für Strings
 Synchrone API
// Beispiel:
localStorage["key"] = JSON.stringify(value);
value= JSON.parse(localStorage["key"]);
 Verfügbar in allen aktuellen Browsern
 Alternative: "Session Storage" (nicht persistent)

8. Web SQL Database
 SQLite im Browser
 Vollwertige relationale Datenbank
 Asynchrone API
 Verfügbar in vielen Browsern
 Chrome, Android
 Safari, Safari Mobile
 Opera
 Achtung: Spezifiktion liegt auf Eis

9. IndexedDB
 "NoSQL im Browser"
 Key-Value-Store
 Indizes, Cursor, Transaktionen
 Asynchrone API
 Verfügbarkeit
 Firefox und Chrome
 Internet Explorer 10

10. FileSystemAPIs
 Virtuelles Filesystem in einer Sandbox
 Geeignet für die Verwaltung von großen Mengen
binärer Daten
 Asynchrone API
 Momentan nur verfügbar in Chrome

11. Herausforderungen
 Synchroner Zugriff ("Blocking I/O")
+Einfachere Programmierschnittstelle
– Anwendung ist nicht reaktionsfähig während I/O
 Abhilfe:Web Workers(Threading)
 Verwalten von binären Dateien
 FileSystemAPIs oder Blobsin SQLite
 Alternative: Base64-Encoding

12. Abstraktion!
 Lawnchair
https://github.com/brianleroux/lawnchair
 Kizzy
https://github.com/ded/kizzy

13. Links
 Zum weiterlesen:
 http://caniuse.com/
 http://www.html5rocks.com/en/tutorials/offl
ine/whats-offline
 http://www.html5rocks.com/en/tutorials/file
/filesystem/