your browser, your storage


Published on

manage data on the browser is the new pr0n for frontend developers. Let's discover how it works and which are the browsers pitfall...

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

your browser, your storage

  1. 1. Your browser, my storagea new approach on data storingFrancesco Fulloneff AT
  2. 2. Who am IFrancesco Fullone aka Fullo- PHP developer since 1999- President- and Open Source Evangelist- CEO @- founder @- Nerd and geek
  3. 3. What we want is a lot of storage space, onthe client, that persists beyond a pagerefresh 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 were introduced inHTTP/1.0, limited to only 20 per domain and 4KB each.
  7. 7. Cookies are sent to and from client at any connection.
  8. 8. Microsoft with Internet Explorer 6 introduced dHTML and theuserData API to store up to 64KB of data
  9. 9. Mozilla introduced with Firefox 2the 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 accessto the stored resources.
  12. 12. Between 2005 and 2007 was written by Brad Neuberg as a Js->Flashbridge to manage bigger chunks of data (with user prompt over 1MB).
  13. 13. Google created Gears in 2007, that introduced a databaseparadigm (based on SQLite) to the storage problem.
  14. 14. All these storage systems had different APIs, a commonplatform is needed by all the browser vendors.
  15. 15. The two approaches of storing: Application Cache Offline storage
  16. 16. Application Caching involvessaving the applications core logic and user-interface. work/#applicationcache
  17. 17. It is enabled by a file .manifest that declares which resources have to be saved locally. (theoretically limited to 5MB).
  18. 18. CACHE MANIFEST# Explicitly cached entriesCACHE:index.htmlstylesheet.cssimages/logo.pngscripts/main.js# Resources that require the user to be online.NETWORK:login.php/myapi 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.htmlimages/large/ images/offline.jpg
  19. 19. applicationCache can use events to trigger application behavior– window.applicationCache.onchecking = function(e) { • log("Checking for application update");–}
  20. 20. If you change a resource and you dont update (rev) the .manifest the browser may not download the new file!(yes! cached resources have priority on the online ones)
  21. 21. Data storage is about capturing specific data, or resources the user has expressed interest in.
  22. 22. Approaches toData Storage
  23. 23. Web Storage is the simplerimplementation of the Data Storage paradigm.
  24. 24. Web Storage is based on astructure of key-value pairs like any JavaScript object.localStorage.setItem("bar", foo);
  25. 25. Web Storage can save up to 5MBbut only as strings. So we have to force a casting if needed.var bar = parseInt(localStorage["bar"]);
  26. 26. Web Storage should be local based or session based. var bar = localStorage["bar"];var foo = sessionStorage["foo"];
  27. 27. sessionStorage mantains astorage area thats available forthe duration of the web session. Opening a new window/tab will create a new session.
  28. 28. localStorage relies only on client, so we have to trackchanges and use to sync server and client if needed.
  29. 29. Web SQL Database is WAS justan offline SQL implementation, based on SQLite.
  30. 30. 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"); } » );});
  31. 31. Web SQL Database is not supported by Microsoft andMozilla, instead it is on browsers based on webkit.
  32. 32. But ...Web SQL Database is dead! as being dropped by W3C from 18/11/10 why bother more?
  33. 33. Web SQL Database is the only database storage engine working on mobile devices!
  34. 34. IndexedDB is a nice compromise between Web Storage and Web SQL Database.
  35. 35. IndexedDB allows to create anindex on a certain field stored in a standard key->value mapping.
  36. 36. IndexedDB is promoted by allbrowsers vendor, but is not yet fully supported by all Firefox 4, Chrome 11, have full implementation. Safari 5.1 and IE 10 will have
  37. 37. FileAPI or File Storage will giveus a way to store a lot of data.
  38. 38. File API includes FileReader and FileWriter APIs. Actually is supported by Chrome, Firefox > 3.6, Safari > 5.1, Opera > 11.1.
  39. 39. First steps on offline storage development.
  40. 40. Storages Status/1
  41. 41. Storages Status/2
  42. 42. Detect if the storing feature is supported by the browser (withmodernizr), otherwise degradate to something else. (ie.
  43. 43. against lost data, sync automatically.
  44. 44. Automatically detect when users are online.
  45. 45. Do not exceed in storing data,you can store binary data base64 encoded but remember the pitfalls in performance.
  46. 46. Avoid race conditions.If possible use WebSQL to use its transactions features.
  47. 47. use local storage to help yourapplication to become faster.
  48. 48. ?
  49. 49. jsDay + phpDay 2012 16-19 Maggio 2012 Verona
  50. 50. Francesco Fullone @fullo via Quinto Bucci 205 47023 Cesena (FC) info AT
  1. A particular slide catching your eye?

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