SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
OPEN TECH TALK #4 NOVEMBER 2011




  HTML5 Storage Solutions



Simon Jockers
jockers@htw-berlin.de
LocalStorage – 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
FileSystemAPIs

 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
    FileSystemAPIs oder Blobsin SQLite
    Alternative: Base64-Encoding
Abstraktion!

 Lawnchair
  https://github.com/brianleroux/lawnchair


 Kizzy
  https://github.com/ded/kizzy
Links

 Zum weiterlesen:

 http://caniuse.com/

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

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

Weitere ähnliche Inhalte

Andere mochten auch

Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 2 (Im Vertrieb der NAXOS Deutschl...
Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 2 (Im Vertrieb der NAXOS Deutschl...Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 2 (Im Vertrieb der NAXOS Deutschl...
Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 2 (Im Vertrieb der NAXOS Deutschl...NAXOS Deutschland GmbH
 
Et oer berlin-koeln-190913
Et oer berlin-koeln-190913Et oer berlin-koeln-190913
Et oer berlin-koeln-190913Richard Heinen
 
Las bases de datos y el access
Las bases de datos y el accessLas bases de datos y el access
Las bases de datos y el accessJesus1499
 
Gipfeltreffen März 2012: Präsentation Mitarbeiterzufriedenheit (Christian Katz)
Gipfeltreffen März 2012: Präsentation Mitarbeiterzufriedenheit (Christian Katz)Gipfeltreffen März 2012: Präsentation Mitarbeiterzufriedenheit (Christian Katz)
Gipfeltreffen März 2012: Präsentation Mitarbeiterzufriedenheit (Christian Katz)EGELI Informatik AG
 
Software Asset Management Strategies 2012
Software Asset Management Strategies 2012 Software Asset Management Strategies 2012
Software Asset Management Strategies 2012 Maria Willamowius
 
Nivelación 4º parte i im
Nivelación 4º parte i imNivelación 4º parte i im
Nivelación 4º parte i imchomiita
 
Flat For Sale in Delhi
Flat For Sale in DelhiFlat For Sale in Delhi
Flat For Sale in DelhiSumit Sharma
 
Quieren descubrir la forma en la que
Quieren descubrir  la forma en la queQuieren descubrir  la forma en la que
Quieren descubrir la forma en la quesegundob2012
 
Weine aus dem globus sortiment vina albali
Weine aus dem globus sortiment vina albaliWeine aus dem globus sortiment vina albali
Weine aus dem globus sortiment vina albaliDieter Freiermuth
 
Blu-ray, DVD- und CD-Neuheiten Februar 2013 Nr. 3 (Im Vertrieb der NAXOS Deut...
Blu-ray, DVD- und CD-Neuheiten Februar 2013 Nr. 3 (Im Vertrieb der NAXOS Deut...Blu-ray, DVD- und CD-Neuheiten Februar 2013 Nr. 3 (Im Vertrieb der NAXOS Deut...
Blu-ray, DVD- und CD-Neuheiten Februar 2013 Nr. 3 (Im Vertrieb der NAXOS Deut...NAXOS Deutschland GmbH
 
El futuro de las bibliotecas rosa reyes
El futuro de las bibliotecas rosa reyesEl futuro de las bibliotecas rosa reyes
El futuro de las bibliotecas rosa reyesRosaErika
 
Responsablidad Social para pymes
Responsablidad Social para pymesResponsablidad Social para pymes
Responsablidad Social para pymesR. .
 

Andere mochten auch (17)

Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 2 (Im Vertrieb der NAXOS Deutschl...
Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 2 (Im Vertrieb der NAXOS Deutschl...Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 2 (Im Vertrieb der NAXOS Deutschl...
Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 2 (Im Vertrieb der NAXOS Deutschl...
 
Et oer berlin-koeln-190913
Et oer berlin-koeln-190913Et oer berlin-koeln-190913
Et oer berlin-koeln-190913
 
Las bases de datos y el access
Las bases de datos y el accessLas bases de datos y el access
Las bases de datos y el access
 
Gipfeltreffen März 2012: Präsentation Mitarbeiterzufriedenheit (Christian Katz)
Gipfeltreffen März 2012: Präsentation Mitarbeiterzufriedenheit (Christian Katz)Gipfeltreffen März 2012: Präsentation Mitarbeiterzufriedenheit (Christian Katz)
Gipfeltreffen März 2012: Präsentation Mitarbeiterzufriedenheit (Christian Katz)
 
Software Asset Management Strategies 2012
Software Asset Management Strategies 2012 Software Asset Management Strategies 2012
Software Asset Management Strategies 2012
 
Hazlo
HazloHazlo
Hazlo
 
Chaussee m2
Chaussee m2Chaussee m2
Chaussee m2
 
Nivelación 4º parte i im
Nivelación 4º parte i imNivelación 4º parte i im
Nivelación 4º parte i im
 
Divide diversityweb
Divide diversitywebDivide diversityweb
Divide diversityweb
 
Flat For Sale in Delhi
Flat For Sale in DelhiFlat For Sale in Delhi
Flat For Sale in Delhi
 
Quieren descubrir la forma en la que
Quieren descubrir  la forma en la queQuieren descubrir  la forma en la que
Quieren descubrir la forma en la que
 
Weine aus dem globus sortiment vina albali
Weine aus dem globus sortiment vina albaliWeine aus dem globus sortiment vina albali
Weine aus dem globus sortiment vina albali
 
Blu-ray, DVD- und CD-Neuheiten Februar 2013 Nr. 3 (Im Vertrieb der NAXOS Deut...
Blu-ray, DVD- und CD-Neuheiten Februar 2013 Nr. 3 (Im Vertrieb der NAXOS Deut...Blu-ray, DVD- und CD-Neuheiten Februar 2013 Nr. 3 (Im Vertrieb der NAXOS Deut...
Blu-ray, DVD- und CD-Neuheiten Februar 2013 Nr. 3 (Im Vertrieb der NAXOS Deut...
 
La web 2.0
La web 2.0La web 2.0
La web 2.0
 
El futuro de las bibliotecas rosa reyes
El futuro de las bibliotecas rosa reyesEl futuro de las bibliotecas rosa reyes
El futuro de las bibliotecas rosa reyes
 
Responsablidad Social para pymes
Responsablidad Social para pymesResponsablidad Social para pymes
Responsablidad Social para pymes
 
Fuentes
FuentesFuentes
Fuentes
 

Ähnlich wie HTML5 Local Storrage Solutions [German]

HTML5 Storage
HTML5 StorageHTML5 Storage
HTML5 Storageadesso AG
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestBastian Feder
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magentoAOE
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...Sinan Akalın
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Ist GraphQL das bessere REST
Ist GraphQL das bessere RESTIst GraphQL das bessere REST
Ist GraphQL das bessere RESTMartin Abraham
 
High Performance Multi-Server Magento in der Cloud
High Performance Multi-Server Magento in der CloudHigh Performance Multi-Server Magento in der Cloud
High Performance Multi-Server Magento in der CloudAOE
 
Schnittstellen und Webservices
Schnittstellen und WebservicesSchnittstellen und Webservices
Schnittstellen und WebservicesJakob .
 
Drei Dinge, die mich kürzlich inspiriert haben
Drei Dinge, die mich kürzlich inspiriert habenDrei Dinge, die mich kürzlich inspiriert haben
Drei Dinge, die mich kürzlich inspiriert habenChristian Trabold
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdAOE
 
Amazon Lightsail Webinar
Amazon Lightsail WebinarAmazon Lightsail Webinar
Amazon Lightsail WebinarAWS Germany
 
Webinar SharePoint auf AWS
Webinar SharePoint auf AWSWebinar SharePoint auf AWS
Webinar SharePoint auf AWSAWS Germany
 
Wordpress on steroids
Wordpress on steroidsWordpress on steroids
Wordpress on steroidsBlogwerk AG
 
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon MeggleOSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon MeggleNETWAYS
 
Erweitern sie ihr Data Center mit Cloud Services
Erweitern sie ihr Data Center mit Cloud ServicesErweitern sie ihr Data Center mit Cloud Services
Erweitern sie ihr Data Center mit Cloud ServicesAWS Germany
 
Top 10 Internet Trends 2000
Top 10 Internet Trends 2000Top 10 Internet Trends 2000
Top 10 Internet Trends 2000Jürg Stuker
 

Ähnlich wie HTML5 Local Storrage Solutions [German] (20)

HTML5 Storage
HTML5 StorageHTML5 Storage
HTML5 Storage
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
 
Meet Magento - High performance magento
Meet Magento - High performance magentoMeet Magento - High performance magento
Meet Magento - High performance magento
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Cloud Computing
Cloud ComputingCloud Computing
Cloud Computing
 
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
new Html5 features and browser compatibility, Stand der Standardisierung, Übe...
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Ist GraphQL das bessere REST
Ist GraphQL das bessere RESTIst GraphQL das bessere REST
Ist GraphQL das bessere REST
 
High Performance Multi-Server Magento in der Cloud
High Performance Multi-Server Magento in der CloudHigh Performance Multi-Server Magento in der Cloud
High Performance Multi-Server Magento in der Cloud
 
Schnittstellen und Webservices
Schnittstellen und WebservicesSchnittstellen und Webservices
Schnittstellen und Webservices
 
Web-API Design in Java
Web-API Design in JavaWeb-API Design in Java
Web-API Design in Java
 
Drei Dinge, die mich kürzlich inspiriert haben
Drei Dinge, die mich kürzlich inspiriert habenDrei Dinge, die mich kürzlich inspiriert haben
Drei Dinge, die mich kürzlich inspiriert haben
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
 
Amazon Lightsail Webinar
Amazon Lightsail WebinarAmazon Lightsail Webinar
Amazon Lightsail Webinar
 
Webinar SharePoint auf AWS
Webinar SharePoint auf AWSWebinar SharePoint auf AWS
Webinar SharePoint auf AWS
 
Wordpress on steroids
Wordpress on steroidsWordpress on steroids
Wordpress on steroids
 
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon MeggleOSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
 
Erweitern sie ihr Data Center mit Cloud Services
Erweitern sie ihr Data Center mit Cloud ServicesErweitern sie ihr Data Center mit Cloud Services
Erweitern sie ihr Data Center mit Cloud Services
 
Top 10 Internet Trends 2000
Top 10 Internet Trends 2000Top 10 Internet Trends 2000
Top 10 Internet Trends 2000
 

HTML5 Local Storrage Solutions [German]

  • 1. OPEN TECH TALK #4 NOVEMBER 2011 HTML5 Storage Solutions Simon Jockers jockers@htw-berlin.de
  • 2. LocalStorage – Wofür?  Speichern von Nutzerdaten  Caching von Assets  Entwicklung von Offline-Anwendungen
  • 6. 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.
  • 7. 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)
  • 8. 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
  • 9. IndexedDB  "NoSQL im Browser"  Key-Value-Store  Indizes, Cursor, Transaktionen  Asynchrone API  Verfügbarkeit  Firefox und Chrome  Internet Explorer 10
  • 10. FileSystemAPIs  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
  • 11. 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  FileSystemAPIs oder Blobsin SQLite  Alternative: Base64-Encoding
  • 12. Abstraktion!  Lawnchair https://github.com/brianleroux/lawnchair  Kizzy https://github.com/ded/kizzy
  • 13. Links  Zum weiterlesen:  http://caniuse.com/  http://www.html5rocks.com/en/tutorials/offl ine/whats-offline  http://www.html5rocks.com/en/tutorials/file /filesystem/