your browser, my storage
DESCRIPTION
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.TRANSCRIPT
![Page 1: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/1.jpg)
Your browser, my storagea new approach on data storing (v.1.3)
Francesco Fullone
ff AT ideato.it
![Page 2: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/2.jpg)
Who am I
Francesco Fullone aka Fullo
- PHP developer since 1999
- President
- and Evangelist
- CEO @
- founder @
- Nerd and geek
![Page 3: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/3.jpg)
![Page 4: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/4.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 5: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/5.jpg)
Persistent local storage is one of the areas where client
applications traditionally win against web applications.
![Page 6: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/6.jpg)
A jump in the past
![Page 7: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/7.jpg)
Cookies were introduced in HTTP/1.0, limited to only 20 per
domain and 4KB each.
http://qrurl.it/r/3l
![Page 8: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/8.jpg)
Cookies are sent to and from client at any connection.
http://qrurl.it/r/3m
![Page 9: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/9.jpg)
Microsoft with Internet Explorer 6 introduced dHTML and the
userData API to store up to 64KB of data
![Page 10: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/10.jpg)
Mozilla introduced with Firefox 2 the DOM Storage API, it will then
know as Web Storage.
![Page 11: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/11.jpg)
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
![Page 12: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/12.jpg)
With Flash 8, in 2006, Adobe introduced the
ExternalInterface to allow Js to access
to the stored resources.
![Page 13: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/13.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 14: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/14.jpg)
Google created Gears in 2007, that introduced a database
paradigm (based on SQLite) to solve the storage problem.
![Page 15: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/15.jpg)
BUT
![Page 16: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/16.jpg)
All these storage systems had different APIs, a common
platform is needed by all the browser vendors.
![Page 17: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/17.jpg)
![Page 18: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/18.jpg)
The two approaches of storing:
Application Cache
Offline storage
![Page 19: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/19.jpg)
Application Caching involves saving the application's core logic
and user-interface.
http://qrurl.it/r/3g
![Page 20: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/20.jpg)
It is enabled by a file .appcache that declares which resources
have to be saved locally.
(theoretically limited to 5MB).
![Page 21: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/21.jpg)
CACHE MANIFEST
# Explicitly cached entries
CACHE:index.htmlstylesheet.cssimages/logo.pnghttp://www.anothersite.com/scripts/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.avi images/offline.jpg
![Page 22: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/22.jpg)
applicationCache can use events to trigger application behavior
window.applicationCache.onchecking = function(e) {
log("Checking for application update");
}
![Page 23: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/23.jpg)
applicationCache or check if the browser is online
If (window.navigator.onLine) {
log("Application is online");
}
![Page 24: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/24.jpg)
Chrome/Chromium doesn't support
window.navigator.onLine attribute and...
It doesn't have a real offline mode!
![Page 25: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/25.jpg)
As stated in the specs: “window.navigator.onLine is inherently unreliable. A computer can be connected
to a network without having Internet access.”
![Page 26: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/26.jpg)
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)
![Page 27: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/27.jpg)
Data storage is about capturing specific
data, or resources the user has expressed
interest in.http://qrurl.it/r/3n
![Page 28: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/28.jpg)
Approaches to
Data Storage
![Page 29: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/29.jpg)
Web Storage is the simpler implementation of the Data
Storage paradigm.
http://qrurl.it/r/3h
![Page 30: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/30.jpg)
Web Storage is based on a structure of key-value pairs like
any JavaScript object.
localStorage.setItem("bar", foo);
![Page 31: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/31.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 32: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/32.jpg)
Web Storage should be local based or session based.
var bar = localStorage["bar"];
var foo = sessionStorage["foo"];
![Page 33: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/33.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 34: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/34.jpg)
localStorage relies only on client, so we have to track
changes and use storage.events to sync server and client if
needed.
![Page 35: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/35.jpg)
Web SQL Database is WAS just an offline SQL implementation,
based on SQLite.
http://qrurl.it/r/3i
![Page 36: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/36.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 37: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/37.jpg)
Web SQL Database is not supported by Microsoft and
Mozilla, it is on browsers based on webkit.
![Page 38: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/38.jpg)
But ...
Web SQL Database is dead!as being dropped by W3C from 18/11/10
why bother more?
![Page 39: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/39.jpg)
Web SQL Database is the only database storage engine that works on
mobile devices!
![Page 40: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/40.jpg)
IndexedDB is a nice compromise between Web Storage and Web
SQL Database.
http://qrurl.it/r/3j
![Page 41: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/41.jpg)
IndexedDB allows to create an index on a certain field stored in a standard key->value mapping.
![Page 42: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/42.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 43: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/43.jpg)
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction;
Using IndexedDB/1
![Page 44: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/44.jpg)
var dbVersion = 1;var request = indexedDB.open("MyDb", dbVersion);
request.onsuccess = function (event) { console.log("creating/accessing IndexedDB db"); db = request.result;}
Using IndexedDB/2
![Page 45: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/45.jpg)
var transaction = db.transaction(["todo"], IDBTransaction.READ_WRITE);var store = transaction.objectStore("todo");
var data = { "text": “text to be saved”, "timeStamp": new Date().getTime()};
var put = store.put(data);
Using IndexedDB/3
![Page 46: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/46.jpg)
// Get everything in the store;var keyRange = IDBKeyRange.lowerBound(0);var cursorRequest=store.openCursor(keyRange);
cursorRequest.onsuccess = function(e) { var results = e.target.result; if(!!results == false) return;
/* DO SOMETHING */
results.continue();};
Using IndexedDB/4
![Page 47: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/47.jpg)
FileAPI allows to manipulate file objects, as well as
programmatically select them and access their data.
http://qrurl.it/r/3k
![Page 48: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/48.jpg)
File API includes FileReader and FileWriter APIs.
Actually is supported by Chrome, Firefox > 3.6, Safari > 5.1, Opera > 11.1.
![Page 50: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/50.jpg)
First steps on offline storage development.
http://flic.kr/p/5PnRQr
![Page 51: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/51.jpg)
Storages Status/1
![Page 52: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/52.jpg)
Storages Status/2
![Page 53: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/53.jpg)
Storages Status/3
![Page 54: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/54.jpg)
Detect if the storing feature is supported by the browser (with
modernizr), otherwise degradate to something else.
(ie. dojox.storage)
![Page 55: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/55.jpg)
Use libraries that manage data for you
(ie. storagejs, lawnchair)
![Page 56: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/56.jpg)
Protect against lost data,
sync automatically.
http://qrurl.it/r/3o
![Page 57: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/57.jpg)
Automatically detect when
users are online.
http://qrurl.it/r/3p
![Page 58: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/58.jpg)
Do not exceed in storing data, you can store binary data base64
encoded but remember the pitfalls in performance.
![Page 59: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/59.jpg)
Avoid race conditions.
If possible use WebSQL to use its transactions features.
![Page 60: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/60.jpg)
use local storage to help your application to become faster.
![Page 61: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/61.jpg)
basket.jshttp://qrurl.it/r/c2
![Page 62: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/62.jpg)
basket
.require('jquery.js')
.require('underscore.js')
.require('app.js').wait(function(){
• /* do something cool */
});
![Page 63: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/63.jpg)
?
![Page 64: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/64.jpg)
jsDay + phpDay 201216-19 Maggio 2012 Verona
www.phpday.it
![Page 65: your browser, my storage](https://reader033.vdocuments.mx/reader033/viewer/2022052523/55514fd3b4c905c6268b553d/html5/thumbnails/65.jpg)
via Quinto Bucci 20547023 Cesena (FC)info AT ideato.itwww.ideato.it
Francesco [email protected]@fullo