your browser, my storage

Your browser, my storagea new approach on data storing (v.1.3)

Francesco Fullone

ff AT ideato.it

Who am I

Francesco Fullone aka Fullo

- PHP developer since 1999

- President

- and Evangelist

- CEO @

- founder @

- Nerd and geek

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

Persistent local storage is one of the areas where client

applications traditionally win against web applications.

A jump in the past

Cookies were introduced in HTTP/1.0, limited to only 20 per

domain and 4KB each.

http://qrurl.it/r/3l

Cookies are sent to and from client at any connection.

http://qrurl.it/r/3m

Microsoft with Internet Explorer 6 introduced dHTML and the

userData API to store up to 64KB of data

Mozilla introduced with Firefox 2 the DOM Storage API, it will then

know as Web Storage.

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

With Flash 8, in 2006, Adobe introduced the

ExternalInterface to allow Js to access

to the stored resources.

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).

Google created Gears in 2007, that introduced a database

paradigm (based on SQLite) to solve the storage problem.

BUT

All these storage systems had different APIs, a common

platform is needed by all the browser vendors.

The two approaches of storing:

Application Cache

Offline storage

Application Caching involves saving the application's 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 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

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 doesn't support

window.navigator.onLine attribute and...

It doesn't have a real offline mode!

As stated in the specs: “window.navigator.onLine is inherently unreliable. A computer can be connected

to a network without having Internet access.”

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)

Data storage is about capturing specific

data, or resources the user has expressed

interest in.http://qrurl.it/r/3n

Approaches to

Data Storage

Web Storage is the simpler implementation of the Data

Storage paradigm.

http://qrurl.it/r/3h

Web Storage is based on a structure of key-value pairs like

any JavaScript object.

localStorage.setItem("bar", foo);

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"]);

Web Storage should be local based or session based.

var bar = localStorage["bar"];

var foo = sessionStorage["foo"];

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.

localStorage relies only on client, so we have to track

changes and use storage.events to sync server and client if

needed.

Web SQL Database is WAS just an 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 and

Mozilla, 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 SQL Database is the only database storage engine that works on

mobile devices!

IndexedDB is a nice compromise between Web Storage and Web

SQL Database.

http://qrurl.it/r/3j

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

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

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

Using IndexedDB/1

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

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

  // 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

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/c3

webFS.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 (with

modernizr), otherwise degradate to something else.

(ie. dojox.storage)

Use libraries that manage data for you

(ie. storagejs, lawnchair)

Protect against lost data,

sync automatically.

http://qrurl.it/r/3o

Automatically detect when

users are online.

http://qrurl.it/r/3p

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 your application 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 201216-19 Maggio 2012 Verona

www.phpday.it

via Quinto Bucci 20547023 Cesena (FC)info AT ideato.itwww.ideato.it

Francesco [email protected]@fullo