• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 Storage
 

HTML5 Storage

on

  • 2,197 views

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

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

Statistics

Views

Total Views
2,197
Views on SlideShare
2,197
Embed Views
0

Actions

Likes
1
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 Storage HTML5 Storage Presentation Transcript

    • Client-Side Storage mit HTML 5FrühstücksvortragTom Hombergs28.10.11
    • Inhalt ►  Überblick HTML 5 ►  Motivation für Client-Side Storage ►  HTML 5 Offline & Storage Features ►  Fazit2 Client-Side Storage mit HTML5 28.10.11
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Vielen Dank für Eure Aufmerksamkeit. mehr HTML5 am adesso Developer Day…info@adesso.de / www.adesso.de
    • 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