OPEN TECH TALK #4 NOVEMBER 2011

Simon Jockers jockers@htw-berlin.de

HTML5 Storage Solutions

Local Storage – Wofür?

Speichern von Nutzerdaten

Caching von Assets

Entwicklung von Offline-Anwendungen

Gmail Offline

Financial Times

chrome.angrybirds.com

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.

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)

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

IndexedDB

"NoSQL im Browser"

Key-Value-Store

Indizes, Cursor, Transaktionen

Asynchrone API

Verfügbarkeit Firefox und Chrome

Internet Explorer 10

FileSystem APIs

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

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 FileSystem APIs oder Blobs in SQLite

Alternative: Base64-Encoding

Abstraktion!

Lawnchairhttps://github.com/brianleroux/lawnchair

Kizzyhttps://github.com/ded/kizzy

Links

Zum weiterlesen:

http://caniuse.com/

http://www.html5rocks.com/en/tutorials/offline/whats-offline

http://www.html5rocks.com/en/tutorials/file/filesystem/