your browser, your storage
DESCRIPTION
manage data on the browser is the new pr0n for frontend developers. Let's discover how it works and which are the browsers pitfall...TRANSCRIPT
![Page 1: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/1.jpg)
Your browser, my storagea new approach on data storing
Francesco Fullone
ff AT ideato.it
![Page 2: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/2.jpg)
Who am I
Francesco Fullone aka Fullo
- PHP developer since 1999
- President
- and Open Source Evangelist
- CEO @
- founder @
- Nerd and geek
![Page 3: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/3.jpg)
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
![Page 4: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/4.jpg)
Persistent local storage is one of the areas where client
applications traditionally win against web applications.
![Page 5: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/5.jpg)
A jump in the past
![Page 6: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/6.jpg)
Cookies were introduced in HTTP/1.0, limited to only 20 per
domain and 4KB each.
http://www.flickr.com/photos/betsyweber/4962298614/
![Page 7: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/7.jpg)
Cookies are sent to and from client at any connection.
http://www.flickr.com/photos/dionhinchcliffe/4326080515
![Page 8: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/8.jpg)
Microsoft with Internet Explorer 6 introduced dHTML and the
userData API to store up to 64KB of data
![Page 9: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/9.jpg)
Mozilla introduced with Firefox 2 the DOM Storage API, it will then
know as Web Storage.
![Page 10: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/10.jpg)
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.
![Page 11: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/11.jpg)
With Flash 8, in 2006, Adobe introduced the
ExternalInterface to allow Js to access
to the stored resources.
![Page 12: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/12.jpg)
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).
![Page 13: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/13.jpg)
Google created Gears in 2007, that introduced a database
paradigm (based on SQLite) to the storage problem.
![Page 14: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/14.jpg)
All these storage systems had different APIs, a common
platform is needed by all the browser vendors.
![Page 15: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/15.jpg)
![Page 16: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/16.jpg)
The two approaches of storing:
Application Cache
Offline storage
![Page 17: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/17.jpg)
Application Caching involves saving the application's core logic
and user-interface.
http://www.whatwg.org/specs/web-apps/current-work/#applicationcache
![Page 18: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/18.jpg)
It is enabled by a file .manifest that declares which resources
have to be saved locally.
(theoretically limited to 5MB).
![Page 19: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/19.jpg)
CACHE MANIFEST
# Explicitly cached entries
CACHE:index.htmlstylesheet.cssimages/logo.pngscripts/main.js
# Resources that require the user to be online.
NETWORK:login.php/myapihttp://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.htmlimages/large/ images/offline.jpg
![Page 20: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/20.jpg)
applicationCache can use events to trigger application behavior
– window.applicationCache.onchecking = function(e) {
• log("Checking for application update");
– }
![Page 21: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/21.jpg)
If you change a
resource and you
don't update (rev)
the .manifest the
browser may not
download the new file!(yes! cached resources have priority on the online ones)
![Page 22: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/22.jpg)
Data storage is about capturing specific
data, or resources the user has expressed
interest in.http://www.flickr.com/photos/bfionline/2380398365/
![Page 23: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/23.jpg)
Approaches to
Data Storage
![Page 24: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/24.jpg)
Web Storage is the simpler implementation of the Data
Storage paradigm.
http://dev.w3.org/html5/webstorage/
![Page 25: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/25.jpg)
Web Storage is based on a structure of key-value pairs like
any JavaScript object.
localStorage.setItem("bar", foo);
![Page 26: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/26.jpg)
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"]);
![Page 27: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/27.jpg)
Web Storage should be local based or session based.
var bar = localStorage["bar"];
var foo = sessionStorage["foo"];
![Page 28: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/28.jpg)
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.
![Page 29: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/29.jpg)
localStorage relies only on client, so we have to track
changes and use storage.events to sync server and client if
needed.
![Page 30: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/30.jpg)
Web SQL Database is WAS just an offline SQL implementation,
based on SQLite.
http://dev.w3.org/html5/webdatabase/
![Page 31: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/31.jpg)
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"); }
» );
});
![Page 32: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/32.jpg)
Web SQL Database is not supported by Microsoft and
Mozilla, instead it is on browsers based on webkit.
![Page 33: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/33.jpg)
But ...
Web SQL Database is dead!as being dropped by W3C from 18/11/10
why bother more?
![Page 34: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/34.jpg)
Web SQL Database is the only database storage engine
working on mobile devices!
![Page 35: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/35.jpg)
IndexedDB is a nice compromise between Web Storage and Web
SQL Database.
http://www.w3.org/TR/IndexedDB/
![Page 36: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/36.jpg)
IndexedDB allows to create an index on a certain field stored in a standard key->value mapping.
![Page 37: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/37.jpg)
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
![Page 38: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/38.jpg)
FileAPI or File Storage will give us a way to store a lot of data.
http://www.w3.org/TR/FileAPI/
![Page 39: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/39.jpg)
File API includes FileReader and FileWriter APIs.
Actually is supported by Chrome, Firefox > 3.6, Safari > 5.1, Opera > 11.1.
![Page 40: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/40.jpg)
First steps on offline storage development.
http://www.flickr.com/photos/45449692@N00/3161567381
![Page 41: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/41.jpg)
Storages Status/1
![Page 42: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/42.jpg)
Storages Status/2
![Page 43: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/43.jpg)
Detect if the storing feature is supported by the browser (with
modernizr), otherwise degradate to something else.
(ie. dojox.storage)
![Page 44: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/44.jpg)
Protect against lost data,
sync automatically.
http://www.flickr.com/photos/neate_photos/3529558272/
![Page 45: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/45.jpg)
Automatically detect when
users are online.
http://www.flickr.com/photos/doctorow/2686237951/
![Page 46: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/46.jpg)
Do not exceed in storing data, you can store binary data base64
encoded but remember the pitfalls in performance.
![Page 47: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/47.jpg)
Avoid race conditions.
If possible use WebSQL to use its transactions features.
![Page 48: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/48.jpg)
use local storage to help your application to become faster.
![Page 49: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/49.jpg)
?
![Page 50: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/50.jpg)
jsDay + phpDay 201216-19 Maggio 2012 Verona
www.phpday.it
![Page 51: your browser, your storage](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b6830a4a7959696d8b45f9/html5/thumbnails/51.jpg)
via Quinto Bucci 20547023 Cesena (FC)info AT ideato.itwww.ideato.it
Francesco [email protected]@fullo