Your browser, my storagea new
approach on data storing (v.1.3)Francesco Fulloneff AT ideato.it

Who am IFrancesco Fullone aka
Fullo- PHP developer since 1999- President- and Evangelist- CEO @- founder @- Nerd and geek

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

Persistent local storage is one
of the areas where client applications traditionally win against web applications.

A jump in the past

http://qrurl.it/r/3l Cookies were introduced inHTTP/1.0,
limited to only 20 per domain and 4KB each.

Cookies are sent to and
from client at any connection.http://qrurl.it/r/3m

Microsoft with Internet Explorer 6
introduced dHTML and theuserData API to store up to 64KB of data

Mozilla introduced with Firefox 2the
DOM Storage API, it will then know as Web Storage.

In 2002 Adobe created the
Flash Cookies aka “Local Shared Objects” for Flash 6Data storage increased to 100KB but it was difficult to be used

With Flash 8, in 2006,
Adobe introduced the ExternalInterface to allow Js to accessto the stored resources.

Between 2005 and 2007 dojox.storage
was written by Brad Neuberg as a Js->Flashbridge to manage bigger chunks of data (with user prompt over 1MB).

Google created Gears in 2007,
that introduced a databaseparadigm (based on SQLite) to solve the storage problem.

BUT

All these storage systems had
different APIs, a commonplatform is needed by all the browser vendors.

The two approaches of storing:
Application Cache Offline storage

Application Caching involvessaving the applications
core logic and user-interface. http://qrurl.it/r/3g

It is enabled by a
file .appcache that declares which resources have to be saved locally. (theoretically limited to 5MB).

CACHE MANIFEST# Explicitly cached entriesCACHE: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

applicationCache can use events to
trigger application behavior window.applicationCache.onchecking = function(e) { log("Checking for application update"); }

applicationCache or check if the
browser is online If (window.navigator.onLine) { log("Application is online"); }

Chrome/Chromium doesnt supportwindow.navigator.onLine attribute and...
It doesnt have a real offline mode!

As stated in the specs:“window.navigator.onLine
is inherentlyunreliable. A computer can be connected to a network without having Internet access.”

If you change a resource
and you dont update (rev) the .appcache file the browser may not download the new file!(yes! cached resources have priority on the online ones)

Data storage is about capturing
specific data, or resources the user has expressed interest in.http://qrurl.it/r/3n

Approaches toData Storage

Web Storage is the simplerimplementation
of the Data Storage paradigm. http://qrurl.it/r/3h

Web Storage is based on
astructure of key-value pairs like any JavaScript object.localStorage.setItem("bar", foo);

Web Storage can save up
to 5MBbut only as strings. So we have to force a casting if needed.var bar = parseInt(localStorage["bar"]);

Web Storage should be local
based or session based. var bar = localStorage["bar"];var foo = sessionStorage["foo"];

sessionStorage mantains astorage area thats
available forthe duration of the web session. Opening a new window/tab will create a new session.

localStorage relies only on client,
so we have to trackchanges and use storage.events to sync server and client if needed.

Web SQL Database is WAS
justan 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 not exists checkins(id integer primary key asc, time integer, latitude float, longitude float, mood string)", [], function() { console.log("siucc"); } » );});

Web SQL Database is not
supported by Microsoft andMozilla, 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 SQLDatabase is theonly databasestorage
engine that works onmobile devices!

IndexedDB is a nice compromise
between Web Storage and Web SQL Database. http://qrurl.it/r/3j

IndexedDB allows to create anindex
on a certain field stored in a standard key->value mapping.

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

Using IndexedDB/1var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction;

Using IndexedDB/2var dbVersion = 1;var request = indexedDB.open("MyDb", dbVersion);request.onsuccess = function (event) { console.log("creating/accessing IndexedDB db"); db = request.result;}

Using IndexedDB/3var 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/4 // 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();};

FileAPI allows to manipulate file
objects, as well as programmatically select them and access their data. http://qrurl.it/r/3k

File API includes FileReader and
FileWriter APIs. Actually is supported by Chrome, Firefox > 3.6, Safari > 5.1, Opera > 11.1.

filer.jshttp://qrurl.it/r/c3webFS.jshttp://qrurl.it/r/c4

First steps on offline storage
development.http://flic.kr/p/5PnRQr

Storages Status/1

Storages Status/2

Storages Status/3

Detect if the storing feature
is supported by the browser (withmodernizr), otherwise degradate to something else. (ie. dojox.storage)

Use libraries that manage data
for you (ie. storagejs, lawnchair)

http://qrurl.it/r/3oProtect 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
yourapplication to become faster.

basket.jshttp://qrurl.it/r/c2

basket .require(jquery.js) .require(underscore.js) .require(app.js).wait(function(){ • /* do something cool */ });

?

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 www.ideato.it