This document discusses approaches for storing data on the client side beyond a page refresh without transmitting it to the server. It reviews the history of cookies, Flash cookies, Gears, and other approaches. It then summarizes modern approaches like Application Cache, Web Storage, Web SQL Database, IndexedDB, and the File API which allow persistent local storage on the client. It concludes with tips for using these storage options and libraries to help manage offline data.

1. Your browser, my storage
a new approach on data storing (v.1.3)
Francesco Fullone
ff AT ideato.it

2. Who am I
Francesco Fullone aka Fullo
- PHP developer since 1999
- President
- and Evangelist
- CEO @
- founder @
- Nerd and geek

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

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

6. A jump in the past

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

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

9. Microsoft with Internet Explorer 6
introduced dHTML and the
userData API to store up to 64KB
of data

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

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

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

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

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

15. BUT

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

18. The two approaches of storing:
Application Cache
Offline storage

19. Application Caching involves
saving the application's core logic
and user-interface.
http://qrurl.it/r/3g

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

21. CACHE MANIFEST
# Explicitly cached entries
CACHE:
index.html
stylesheet.css
images/logo.png
http://www.anothersite.com/scripts/main.js
# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://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.html
images/large/ images/offline.jpg
.avi images/offline.jpg

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

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

24. Chrome/Chromium doesn't support
window.navigator.onLine attribute and...
It doesn't have a real offline mode!

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

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

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

28. Approaches to
Data Storage

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

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

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

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

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

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

35. Web SQL Database is WAS just
an offline SQL implementation,
based on SQLite.
http://qrurl.it/r/3i

36. 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"); }
» );
});

37. Web SQL Database is not
supported by Microsoft and
Mozilla, it is on browsers based
on webkit.

38. But ...
Web SQL Database is dead!
as being dropped by W3C from 18/11/10
why bother more?

39. Web SQL
Database is the
only database
storage engine
that works on
mobile devices!

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

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

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

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

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

45. Using IndexedDB/3
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);

46. 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();
};

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

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

49. filer.js
http://qrurl.it/r/c3
webFS.js
http://qrurl.it/r/c4

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

51. Storages Status/1

52. Storages Status/2

53. Storages Status/3

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

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

56. http://qrurl.it/r/3o
Protect against lost data,
sync automatically.

57. http://qrurl.it/r/3p
Automatically detect when
users are online.

58. Do not exceed in storing data,
you can store binary data base64
encoded but remember the
pitfalls in performance.

59. Avoid race conditions.
If possible use WebSQL to use its
transactions features.

60. use local storage to help your
application to become faster.

61. basket.js
http://qrurl.it/r/c2

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

63. ?

64. jsDay + phpDay 2012
16-19 Maggio 2012 Verona
www.phpday.it

65. Francesco Fullone
ff@ideato.it
@fullo
via Quinto Bucci 205
47023 Cesena (FC)
info AT ideato.it
www.ideato.it