HTML5 Storage

1. Client-Side Storage mit HTML 5FrühstücksvortragTom Hombergs28.10.11

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

3. HTML auf der Zeitachse CSS + HTML1991 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 34 Client-Side Storage mit HTML5 28.10.11

5. Offline & Storage – MotivationWarum 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 sein5 Client-Side Storage mit HTML5 28.10.11

6. Offline & Storage – FeaturesWeb Storage►  sessionStorage: Speichern von Daten innerhalb einer Session►  localStorage: Speichern von Daten zwischen zwei SessionsDatabase Storage►  Web SQL Database►  Indexed DatabaseApplication Cache►  Caching von DateienNetzwerkstatus►  Erkennung des Online-Status6 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 laden7 Client-Side Storage mit HTML5 28.10.11

8. Web Storage – Old SchoolClient-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 DatabaseWeb 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 – IndexedDBIndexedDB►  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 CacheCaching 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.012 Client-Side Storage mit HTML5 28.10.11

13. Application Cache – Online-StatusBin 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-SzenarioIm 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 ladenIm 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 synchronisierenProminente Anwendung►  Google Mail Mobile14 Client-Side Storage mit HTML5 28.10.11

15. Fazit zum Thema HTML5 / Offline & StorageBrowserkompatibilitä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 wenigstenUnterstützung►  Zahlreiche Javascript-Bibliotheken, insb. für mobile AnwendungenUmdenken►  (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 nachdenken15 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 API16 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ützungBrowser-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 Punkte18 Client-Side Storage mit HTML5 28.10.11

HTML5 Storage

adesso AG

HTML5 Storage