Your browser, my storage
-
Upload
francesco-fullone -
Category
Technology
-
view
1.523 -
download
0
description
Transcript of Your browser, my storage
![Page 1: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/1.jpg)
Your browser, my storagea new approach on data storing
Francesco Fullone
ff AT ideato.it
![Page 2: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/2.jpg)
Who am I
Francesco Fullone aka Fullo
- PHP developer since 1999
- President
- and Open Source Evangelist
- CEO @
- Nerd and geek
![Page 3: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/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, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/4.jpg)
Persistent local storage is one of the areas where client
applications traditionally win against web applications.
![Page 5: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/5.jpg)
A jump in the past
![Page 6: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/6.jpg)
Cookies are 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, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/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, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/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, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/9.jpg)
Mozilla introduced with Firefox 2 the DOM Storage API, it will then
know as Web Storage.
![Page 10: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/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, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/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, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/12.jpg)
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).
![Page 13: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/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, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/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, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/15.jpg)
![Page 16: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/16.jpg)
The two approaches of storing:
Application Cache
Offline storage
![Page 17: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/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, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/18.jpg)
It is enabled by a file .manifest that declares which resources
have to be saved locally.
(limited to 5MB).
![Page 19: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/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, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/20.jpg)
Data storage is about capturing specific
data, or resources the user has expressed
interest in.http://www.flickr.com/photos/bfionline/2380398365/
![Page 21: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/21.jpg)
Approaches to
Data Storage
![Page 22: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/22.jpg)
Web Storage is the simpler implementation of the Data
Storage paradigm.
http://dev.w3.org/html5/webstorage/
![Page 23: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/23.jpg)
Web Storage is based on a structure of key-value pairs like
any JavaScript object.
localStorage.setItem("bar", foo);
![Page 24: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/24.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 25: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/25.jpg)
Web Storage should be local based or session based.
var bar = localStorage["bar"];
var foo = sessionStorage["foo"];
![Page 26: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/26.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 27: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/27.jpg)
localStorage relies only on client, so we have to track
changes and use storage.events to sync server and client if
needed.
![Page 28: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/28.jpg)
Web SQL Database is just an offline SQL implementation,
based on SQLite.
http://dev.w3.org/html5/webdatabase/
![Page 29: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/29.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 30: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/30.jpg)
Web SQL Database is not (yet) supported by Microsoft and
Mozilla, instead it is on browsers based on webkit.
![Page 31: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/31.jpg)
IndexedDB is a nice compromise between Web Storage and Web
SQL Database.
http://www.w3.org/TR/IndexedDB/
![Page 32: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/32.jpg)
IndexedDB allows to create an index on a certain field stored in a standard key->value mapping.
![Page 33: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/33.jpg)
IndexedDB is promoted by all browsers vendor, but is not yet officially supported by anyone!
Firefox 4 beta has a partial implementation.
![Page 34: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/34.jpg)
FileAPI or File Storage will give us a way to store a lot of data.
http://www.w3.org/TR/FileAPI/
![Page 35: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/35.jpg)
File API includes FileReader and FileWriter APIs.
Actually (FileReader) is partially supported only by Chrome.
![Page 36: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/36.jpg)
First steps on offline storage development.
http://www.flickr.com/photos/45449692@N00/3161567381
![Page 37: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/37.jpg)
HTML 5 Confusion
![Page 38: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/38.jpg)
Detect if the storing feature is supported by the browser (with
modernizr), otherwise degradate to something else.
(ie. dojox.storage)
![Page 39: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/39.jpg)
Protect against lost data,
sync automatically.
http://www.flickr.com/photos/neate_photos/3529558272/
![Page 40: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/40.jpg)
Automatically detect when
users are online.
http://www.flickr.com/photos/doctorow/2686237951/
![Page 41: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/41.jpg)
Do not exceed in storing data, you can store binary data base64
encoded but remember the pitfalls in performance.
![Page 42: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/42.jpg)
Avoid race conditions.
If possible use WebSQL to use its transactions features.
![Page 43: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/43.jpg)
?
![Page 44: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/44.jpg)
phpDay 201112-14 Maggio 2011
www.phpday.it
![Page 45: Your browser, my storage](https://reader034.fdocuments.us/reader034/viewer/2022051323/54b6830b4a79591b3c8b4744/html5/thumbnails/45.jpg)
via Quinto Bucci 20547023 Cesena (FC)info AT ideato.itwww.ideato.it
rate this talk: http://joind.in/2126