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.
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");
}
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
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
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
Editor's Notes
- Chrome you can change the cache limits with – disk-cache-size=N - Opera crashes if the cache is filled chrome: about:appcache-internals firefox: about:cache