HTML5 Storage

Client-Side Storage mit HTML 5
Frühstücksvortrag

Tom Hombergs

28.10.11

Inhalt

►  Überblick HTML 5

►  Motivation für Client-Side Storage

►  HTML 5 Offline & Storage Features

►  Fazit

2 Client-Side Storage mit HTML5 28.10.11

HTML auf der Zeitachse

CSS + HTML
1991 HTML 1994 HTML2 1996 JS 1997 4

1998 CSS 2 2000 XHTML 2005 AJAX 2009 HTML5


HTML 5 – Featurecluster

= HTML + CSS + Javascript

Semantics Multimedia

Offline & Storage Graphics & Effects

Device Access Performance & Integration

Connectivity CSS 3


Offline & Storage – Motivation

Warum 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 sein


Offline & Storage – Features

Web Storage
►  sessionStorage: Speichern von Daten innerhalb einer Session

►  localStorage: Speichern von Daten zwischen zwei Sessions

Database Storage
►  Web SQL Database

►  Indexed Database

Application Cache
►  Caching von Dateien

Netzwerkstatus
►  Erkennung des Online-Status


Web Storage – Übersicht

Server

Client- Client- Client-
Session Session Session

Festplatte

Speichern von Informationen auf dem Client,
anstatt sie vom Server zu laden


Web Storage – Old School

Client-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”


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+


Database Storage – Web SQL Database

Web 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");
}
); -
});


Database Storage – IndexedDB

IndexedDB
►  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) {
-
…
};


Application Cache

Caching 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.0


Application Cache – Online-Status

Bin 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;


Offline-Szenario

Im 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 laden

Im 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

synchronisieren

Prominente Anwendung
►  Google Mail Mobile


Fazit zum Thema HTML5 / Offline & Storage

Browserkompatibilitä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 wenigsten

Unterstützung
►  Zahlreiche Javascript-Bibliotheken, insb. für mobile Anwendungen

Umdenken
►  (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 nachdenken


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 API


Vielen Dank für Eure Aufmerksamkeit.
mehr HTML5 am adesso Developer Day…

info@adesso.de / www.adesso.de

Browser-Unterstützung

Browser-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 Punkte


HTML5 Storage

Recommended

Recommended

More Related Content

Similar to HTML5 Storage

Similar to HTML5 Storage (20)

More from adesso AG

More from adesso AG (20)

HTML5 Storage