Your SlideShare is downloading. ×
0
Your browser, my storage
a new approach on data storing
Francesco Fullone
ff AT ideato.it
Who am I
Francesco Fullone aka Fullo
- PHP developer since 1999
- President
- and Open Source Evangelist
- CEO @
- Nerd an...
What we want is a lot of storage space, on
the client, that persists beyond a page
refresh and isn’t transmitted to the se...
Persistent local storage is one of
the areas where client
applications traditionally win
against web applications.
A jump in the past
Cookies are introduced in
HTTP/1.0, limited to only 20 per
domain and 4KB each.
http://www.flickr.com/photos/betsyweber/49...
Cookies are sent to
and from client at
any connection.
http://www.flickr.com/photos/dionhinchcliffe/4326080515
Microsoft with Internet Explorer 6
introduced dHTML and the
userData API to store up to 64KB
of data
Mozilla introduced with Firefox 2
the DOM Storage API, it will then
know as Web Storage.
Adobe, in 2002, created the Flash
Cookies aka “Local Shared
Objects” for Flash 6.
Data storage increased to 100KB
but it w...
With Flash 8, in 2006,
Adobe introduced the
ExternalInterface
to allow Js to access
to the stored resources.
Between 2005 and 2007
dojox.storage is written by Brad
Neuberg as a Js->Flash bridge to
manage bigger chunks of data
(with...
Google created Gears in 2007,
that introduced a database
paradigm (based on SQLite) to
the storage problem.
All these storage systems had
different APIs, a common
platform is needed by all the
browser vendors.
The two approaches of storing:
Application Cache
Offline storage
Application Caching involves
saving the application's core logic
and user-interface.
http://www.whatwg.org/specs/web-apps/...
It is enabled by a file .manifest
that declares which resources
have to be saved locally.
(limited to 5MB).
CACHE MANIFEST
# Explicitly cached entries
CACHE:
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources th...
Data storage is about
capturing specific
data, or resources the
user has expressed
interest in.
http://www.flickr.com/phot...
Approaches to
Data Storage
Web Storage is the simpler
implementation of the Data
Storage paradigm.
http://dev.w3.org/html5/webstorage/
Web Storage is based on a
structure of key-value pairs like
any JavaScript object.
localStorage.setItem("bar", foo);
Web Storage can save up to 5MB
but only as strings. So we have
to force a casting if needed.
var bar = parseInt(localStora...
Web Storage should be local
based or session based.
var bar = localStorage["bar"];
var foo = sessionStorage["foo"];
sessionStorage mantains a
storage area that's available for
the duration of the web session.
Opening a new window/tab will...
localStorage relies only on
client, so we have to track
changes and use storage.events
to sync server and client if
needed.
Web SQL Database is just an
offline SQL implementation,
based on SQLite.
http://dev.w3.org/html5/webdatabase/
this.db = openDatabase('geomood', '1.0', 'Geo', 8192);
this.db.transaction(function(tx) {
  tx.executeSql("create table if...
Web SQL Database is not (yet)
supported by Microsoft and
Mozilla, instead it is on browsers
based on webkit.
IndexedDB is a nice compromise
between Web Storage and Web
SQL Database.
http://www.w3.org/TR/IndexedDB/
IndexedDB allows to create an
index on a certain field stored in
a standard key->value mapping.
IndexedDB is promoted by all
browsers vendor, but is not yet
officially supported by anyone!
Firefox 4 beta has a partial ...
FileAPI or File Storage will give
us a way to store a lot of data.
http://www.w3.org/TR/FileAPI/
File API includes FileReader and
FileWriter APIs.
Actually (FileReader) is partially supported only by
Chrome.
First steps on
offline storage
development.
http://www.flickr.com/photos/45449692@N00/3161567381
HTML 5 Confusion
Detect if the storing feature is
supported by the browser (with
modernizr), otherwise degradate
to something else.
(ie. do...
Protect against lost data,
sync automatically.
http://www.flickr.com/photos/neate_photos/3529558272/
Automatically detect when
users are online.
http://www.flickr.com/photos/doctorow/2686237951/
Do not exceed in storing data,
you can store binary data base64
encoded but remember the
pitfalls in performance.
Avoid race conditions.
If possible use WebSQL to use its
transactions features.
?
phpDay 2011
12-14 Maggio 2011
www.phpday.it
via Quinto Bucci 205
47023 Cesena (FC)
info AT ideato.it
www.ideato.it
rate this talk: http://joind.in/2126
Your browser, my storage
Upcoming SlideShare
Loading in...5
×

Your browser, my storage

1,586

Published on

HTML5 introduces the new trend of offline storage for applications and data.

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

  • Be the first to like this

No Downloads
Views
Total Views
1,586
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Your browser, my storage"

  1. 1. Your browser, my storage a new approach on data storing Francesco Fullone ff AT ideato.it
  2. 2. Who am I Francesco Fullone aka Fullo - PHP developer since 1999 - President - and Open Source Evangelist - CEO @ - Nerd and geek
  3. 3. What we want is a lot of storage space, on the client, that persists beyond a page refresh and isn’t transmitted to the server. ~ M. Pilgrim
  4. 4. Persistent local storage is one of the areas where client applications traditionally win against web applications.
  5. 5. A jump in the past
  6. 6. Cookies are introduced in HTTP/1.0, limited to only 20 per domain and 4KB each. http://www.flickr.com/photos/betsyweber/4962298614/
  7. 7. Cookies are sent to and from client at any connection. http://www.flickr.com/photos/dionhinchcliffe/4326080515
  8. 8. Microsoft with Internet Explorer 6 introduced dHTML and the userData API to store up to 64KB of data
  9. 9. Mozilla introduced with Firefox 2 the DOM Storage API, it will then know as Web Storage.
  10. 10. Adobe, in 2002, created the Flash Cookies aka “Local Shared Objects” for Flash 6. Data storage increased to 100KB but it was difficult to be used.
  11. 11. With Flash 8, in 2006, Adobe introduced the ExternalInterface to allow Js to access to the stored resources.
  12. 12. Between 2005 and 2007 dojox.storage is written by Brad Neuberg as a Js->Flash bridge to manage bigger chunks of data (with user prompt over 1MB).
  13. 13. Google created Gears in 2007, that introduced a database paradigm (based on SQLite) to the storage problem.
  14. 14. All these storage systems had different APIs, a common platform is needed by all the browser vendors.
  15. 15. The two approaches of storing: Application Cache Offline storage
  16. 16. Application Caching involves saving the application's core logic and user-interface. http://www.whatwg.org/specs/web-apps/current- work/#applicationcache
  17. 17. It is enabled by a file .manifest that declares which resources have to be saved locally. (limited to 5MB).
  18. 18. CACHE MANIFEST # Explicitly cached entries CACHE: index.html stylesheet.css images/logo.png scripts/main.js # Resources that require the user to be online. NETWORK: login.php /myapi http://api.twitter.com # static.html will be served if main.php is inaccessible # offline.jpg will be served in place of all images in images/large/ FALLBACK: /main.php /static.html images/large/ images/offline.jpg
  19. 19. Data storage is about capturing specific data, or resources the user has expressed interest in. http://www.flickr.com/photos/bfionline/2380398365/
  20. 20. Approaches to Data Storage
  21. 21. Web Storage is the simpler implementation of the Data Storage paradigm. http://dev.w3.org/html5/webstorage/
  22. 22. Web Storage is based on a structure of key-value pairs like any JavaScript object. localStorage.setItem("bar", foo);
  23. 23. Web Storage can save up to 5MB but only as strings. So we have to force a casting if needed. var bar = parseInt(localStorage["bar"]);
  24. 24. Web Storage should be local based or session based. var bar = localStorage["bar"]; var foo = sessionStorage["foo"];
  25. 25. sessionStorage mantains a storage area that's available for the duration of the web session. Opening a new window/tab will create a new session.
  26. 26. localStorage relies only on client, so we have to track changes and use storage.events to sync server and client if needed.
  27. 27. Web SQL Database is just an offline SQL implementation, based on SQLite. http://dev.w3.org/html5/webdatabase/
  28. 28. this.db = openDatabase('geomood', '1.0', 'Geo', 8192); this.db.transaction(function(tx) {   tx.executeSql("create table if not exists checkins(id    integer primary key asc, time integer,    latitude float, longitude float, mood   string)",   [],                 function() { console.log("siucc"); } »   ); });
  29. 29. Web SQL Database is not (yet) supported by Microsoft and Mozilla, instead it is on browsers based on webkit.
  30. 30. IndexedDB is a nice compromise between Web Storage and Web SQL Database. http://www.w3.org/TR/IndexedDB/
  31. 31. IndexedDB allows to create an index on a certain field stored in a standard key->value mapping.
  32. 32. IndexedDB is promoted by all browsers vendor, but is not yet officially supported by anyone! Firefox 4 beta has a partial implementation.
  33. 33. FileAPI or File Storage will give us a way to store a lot of data. http://www.w3.org/TR/FileAPI/
  34. 34. File API includes FileReader and FileWriter APIs. Actually (FileReader) is partially supported only by Chrome.
  35. 35. First steps on offline storage development. http://www.flickr.com/photos/45449692@N00/3161567381
  36. 36. HTML 5 Confusion
  37. 37. Detect if the storing feature is supported by the browser (with modernizr), otherwise degradate to something else. (ie. dojox.storage)
  38. 38. Protect against lost data, sync automatically. http://www.flickr.com/photos/neate_photos/3529558272/
  39. 39. Automatically detect when users are online. http://www.flickr.com/photos/doctorow/2686237951/
  40. 40. Do not exceed in storing data, you can store binary data base64 encoded but remember the pitfalls in performance.
  41. 41. Avoid race conditions. If possible use WebSQL to use its transactions features.
  42. 42. ?
  43. 43. phpDay 2011 12-14 Maggio 2011 www.phpday.it
  44. 44. via Quinto Bucci 205 47023 Cesena (FC) info AT ideato.it www.ideato.it rate this talk: http://joind.in/2126
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×