Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Your browser, my storage
a new approach on data storing   (v.1.2)




Francesco Fullone
ff AT ideato.it
Who am I

Francesco Fullone aka Fullo

- PHP developer since 1999
-               President
-         and Open Source Evan...
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 applicatio...
A jump in the past
http://qrurl.it/r/3l




  Cookies were introduced in
HTTP/1.0, limited to only 20 per
    domain and 4KB each.
Cookies are sent to
                        and from client at
                         any connection.



http://qrurl.it...
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.
In 2002 Adobe
                          created the
                    Flash Cookies aka
  “Local Shared Objects” for Fla...
With Flash 8, in 2006,
 Adobe introduced the
  ExternalInterface
 to allow Js to access
to the stored resources.
Between 2005 and 2007
 dojox.storage was written by
  Brad Neuberg as a Js->Flash
bridge to manage bigger chunks
         ...
Google created Gears in 2007,
 that introduced a database
paradigm (based on SQLite) to
    the storage problem.
BUT
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://qrurl.it/r/...
It is enabled by a file .appcache
  that declares which resources
     have to be saved locally.

       (theoretically li...
CACHE MANIFEST

# Explicitly cached entries
CACHE:
index.html
stylesheet.css
images/logo.png
http://www.anothersite.com/sc...
applicationCache can use events
 to trigger application behavior

 window.applicationCache.onchecking = function(e) {
    ...
applicationCache or check if the
        browser is online

  If (window.navigator.onLine) {
      log("Application is onl...
Chrome/Chromium doesn't support
window.navigator.onLine attribute and...




   It doesn't have a real offline mode!
As stated in the specs:
“window.navigator.onLine is inherently
unreliable. A computer can be connected
    to a network wi...
If you change a
                       resource and you
                     don't update (rev)
                     the ....
Data storage is about
                         capturing specific
                       data, or resources the
          ...
Approaches to
Data Storage
Web Storage is the simpler
implementation of the Data
    Storage paradigm.

       http://qrurl.it/r/3h
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(localSto...
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 wi...
localStorage relies only on
  client, so we have to track
changes and use storage.events
  to sync server and client if
  ...
Web SQL Database is WAS just
an offline SQL implementation,
        based on SQLite.

         http://qrurl.it/r/3i
this.db = openDatabase('geomood', '1.0', 'Geo', 8192);
this.db.transaction(function(tx) {
  tx.executeSql("create table if...
Web SQL Database is not
 supported by Microsoft and
Mozilla, it is on browsers based
           on webkit.
But ...
Web SQL Database is dead!
  as being dropped by W3C from 18/11/10



             why bother more?
Web SQL
Database is the
only database
storage engine
 that works on
mobile devices!
IndexedDB is a nice compromise
 between Web Storage and Web
        SQL Database.

         http://qrurl.it/r/3j
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
    fully supported by all

  Firefox 4, Chrome 11, have full...
FileAPI allows to manipulate file
       objects, as well as
  programmatically select them
      and access their data.

...
File API includes FileReader and
         FileWriter APIs.

       Actually is supported by Chrome,
    Firefox > 3.6, Saf...
First steps on
                          offline storage
                          development.

http://flic.kr/p/5PnRQr
Storages Status/1
Storages Status/2
Detect if the storing feature is
 supported by the browser (with
modernizr), otherwise degradate
       to something else....
Use libraries that manage data
             for you


       (ie. storagejs, lawnchair)
http://qrurl.it/r/3o




Protect against lost data,
  sync automatically.
http://qrurl.it/r/3p




                Automatically detect when
                    users are online.
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.
use local storage to help your
application to become faster.
?
jsDay + phpDay 2012
 16-19 Maggio 2012 Verona
     www.phpday.it
Francesco Fullone
    ff@ideato.it
       @fullo



  via Quinto Bucci 205
   47023 Cesena (FC)
    info AT ideato.it
    ...
Your browser, your storage (extended version)
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Con te non ci lavoro
Next
Upcoming SlideShare
Con te non ci lavoro
Next
Download to read offline and view in fullscreen.

3

Share

Your browser, your storage (extended version)

Download to read offline

Complex applications need a persistent database to store, search and join data: till now a dedicated server was needed to do this, and no offline usage of the app was possible. With the introduction of HTML5 and the concept of Web Databases, we don’t need an external server anymore: everything is stored within the user browser and thus the web app can be used offline as well as online.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Your browser, your storage (extended version)

  1. Your browser, my storage a new approach on data storing (v.1.2) Francesco Fullone ff AT ideato.it
  2. Who am I Francesco Fullone aka Fullo - PHP developer since 1999 - President - and Open Source Evangelist - CEO @ - founder @ - Nerd and geek
  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. Persistent local storage is one of the areas where client applications traditionally win against web applications.
  5. A jump in the past
  6. http://qrurl.it/r/3l Cookies were introduced in HTTP/1.0, limited to only 20 per domain and 4KB each.
  7. Cookies are sent to and from client at any connection. http://qrurl.it/r/3m
  8. Microsoft with Internet Explorer 6 introduced dHTML and the userData API to store up to 64KB of data
  9. Mozilla introduced with Firefox 2 the DOM Storage API, it will then know as Web Storage.
  10. In 2002 Adobe created the Flash Cookies aka “Local Shared Objects” for Flash 6 Data storage increased to 100KB but it was difficult to be used
  11. With Flash 8, in 2006, Adobe introduced the ExternalInterface to allow Js to access to the stored resources.
  12. Between 2005 and 2007 dojox.storage was written by Brad Neuberg as a Js->Flash bridge to manage bigger chunks of data (with user prompt over 1MB).
  13. Google created Gears in 2007, that introduced a database paradigm (based on SQLite) to the storage problem.
  14. BUT
  15. All these storage systems had different APIs, a common platform is needed by all the browser vendors.
  16. The two approaches of storing: Application Cache Offline storage
  17. Application Caching involves saving the application's core logic and user-interface. http://qrurl.it/r/3g
  18. It is enabled by a file .appcache that declares which resources have to be saved locally. (theoretically limited to 5MB).
  19. CACHE MANIFEST # Explicitly cached entries CACHE: index.html stylesheet.css images/logo.png http://www.anothersite.com/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 .avi images/offline.jpg
  20. applicationCache can use events to trigger application behavior window.applicationCache.onchecking = function(e) { log("Checking for application update"); }
  21. applicationCache or check if the browser is online If (window.navigator.onLine) { log("Application is online"); }
  22. Chrome/Chromium doesn't support window.navigator.onLine attribute and... It doesn't have a real offline mode!
  23. As stated in the specs: “window.navigator.onLine is inherently unreliable. A computer can be connected to a network without having Internet access.”
  24. If you change a resource and you don't update (rev) the .appcache file the browser may not download the new file! (yes! cached resources have priority on the online ones)
  25. Data storage is about capturing specific data, or resources the user has expressed interest in. http://qrurl.it/r/3n
  26. Approaches to Data Storage
  27. Web Storage is the simpler implementation of the Data Storage paradigm. http://qrurl.it/r/3h
  28. Web Storage is based on a structure of key-value pairs like any JavaScript object. localStorage.setItem("bar", foo);
  29. 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"]);
  30. Web Storage should be local based or session based. var bar = localStorage["bar"]; var foo = sessionStorage["foo"];
  31. 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.
  32. localStorage relies only on client, so we have to track changes and use storage.events to sync server and client if needed.
  33. Web SQL Database is WAS just an offline SQL implementation, based on SQLite. http://qrurl.it/r/3i
  34. 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"); } » ); });
  35. Web SQL Database is not supported by Microsoft and Mozilla, it is on browsers based on webkit.
  36. But ... Web SQL Database is dead! as being dropped by W3C from 18/11/10 why bother more?
  37. Web SQL Database is the only database storage engine that works on mobile devices!
  38. IndexedDB is a nice compromise between Web Storage and Web SQL Database. http://qrurl.it/r/3j
  39. IndexedDB allows to create an index on a certain field stored in a standard key->value mapping.
  40. IndexedDB is promoted by all browsers vendor, but is not yet fully supported by all Firefox 4, Chrome 11, have full implementation. Safari 5.1 and IE 10 will have
  41. FileAPI allows to manipulate file objects, as well as programmatically select them and access their data. http://qrurl.it/r/3k
  42. File API includes FileReader and FileWriter APIs. Actually is supported by Chrome, Firefox > 3.6, Safari > 5.1, Opera > 11.1.
  43. First steps on offline storage development. http://flic.kr/p/5PnRQr
  44. Storages Status/1
  45. Storages Status/2
  46. Detect if the storing feature is supported by the browser (with modernizr), otherwise degradate to something else. (ie. dojox.storage)
  47. Use libraries that manage data for you (ie. storagejs, lawnchair)
  48. http://qrurl.it/r/3o Protect against lost data, sync automatically.
  49. http://qrurl.it/r/3p Automatically detect when users are online.
  50. Do not exceed in storing data, you can store binary data base64 encoded but remember the pitfalls in performance.
  51. Avoid race conditions. If possible use WebSQL to use its transactions features.
  52. use local storage to help your application to become faster.
  53. ?
  54. jsDay + phpDay 2012 16-19 Maggio 2012 Verona www.phpday.it
  55. Francesco Fullone ff@ideato.it @fullo via Quinto Bucci 205 47023 Cesena (FC) info AT ideato.it www.ideato.it
  • carlodaniele

    Oct. 7, 2011
  • acciaipa

    Oct. 7, 2011
  • inmarelibero

    Oct. 6, 2011

Complex applications need a persistent database to store, search and join data: till now a dedicated server was needed to do this, and no offline usage of the app was possible. With the introduction of HTML5 and the concept of Web Databases, we don’t need an external server anymore: everything is stored within the user browser and thus the web app can be used offline as well as online.

Views

Total views

7,297

On Slideshare

0

From embeds

0

Number of embeds

360

Actions

Downloads

39

Shares

0

Comments

0

Likes

3

×