HTML5 Storage

2,444 views
2,287 views

Published on

Präsentation über HTML5 mit dem Fokus auf Offline Storage.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,444
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 Storage

  1. 1. Client-Side Storage mit HTML 5FrühstücksvortragTom Hombergs28.10.11
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 17. Vielen Dank für Eure Aufmerksamkeit. mehr HTML5 am adesso Developer Day…info@adesso.de / www.adesso.de
  18. 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

×