[http://creativecommons.org/licenses/by/3.0/]
This work is licensed under a CC
Attribution 3.0 Unported License [http://creativecommons.org/licenses/by/3.0/]
Mobile applications face two main challenges that call for local data storage: they must be able to go offline so that they can work when there is no connectivity; they must be able to store data locally so that they can better optimize network traffic. In this lecture, we look some of the established mechanisms for local storage (Cookies) and traffic optimization (HTTP caching), and look at the HTML5 mechanisms that provide more extensive client-side support for local data storage: Web Storage and Web SQL Database.
<!DOCTYPE html>
<html>
<head>
<title>Minimal Web Storage Demo</title>
</head>
<body>
<h1>Minimal <a href="http://www.w3.org/TR/webstorage/">Web Storage</a> Demo</h1>
<p>localStorage Page Views: <span id="lCount">untold</span> time(s)</p>
<p>sessionStorage Page Views: <span id="sCount">untold</span> time(s)</p>
<script type="text/javascript">
if (!localStorage.pageLoadCount)
localStorage.pageLoadCount = 0;
localStorage.pageLoadCount = 1 + parseInt(localStorage.pageLoadCount);
// should be .textContent instead of .innerHTML (changed for IE)
document.getElementById('lCount').innerHTML = localStorage.pageLoadCount;
if (!sessionStorage.pageLoadCount)
sessionStorage.pageLoadCount = 0;
sessionStorage.pageLoadCount = 1 + parseInt(sessionStorage.pageLoadCount);
document.getElementById('sCount').innerHTML = sessionStorage.pageLoadCount;
</script>
</body>
</html>best scopefor client-side state?
Typical Web resources (HTML pages) are assembled from a number of resources retrieved by HTTP. Any resource not originating on the server that is hosting the HTML page is considered a third-party resource
. If the HTTP response for such a resource contains a cookie, it is a third-party cookie
.
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}
</script> [http://www.google-analytics.com/ga.js] f = "?utmwv=" + ca + "&utmn=" + Y() + (N(b.hostname) ? "" : "&utmhn=" + S(b.hostname)) + (g.U == 100 ? "" : "&utmsp=" + S(g.U)) + f;
if (0 == s || 2 == s) {
a = 2 == s ? k : c || k;
l.$a(g.oa + f, a)
}
if (1 == s || 2 == s) {
f = ("https:" == b.protocol ? "https://ssl.google-analytics.com/__utm.gif" : "http://www.google-analytics.com/__utm.gif") + f + "&utmac=" + h + "&utmcc=" + l.ac(d);
if (ka) f += "&gaq=1";
l.$a(f, c)
}between tabs
cookie storage spaceautomatically
sessionsas well as (some) access control
interface Storage {
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any data);
deleter void removeItem(in DOMString key);
void clear();
}; [http://www.w3.org/TR/webstorage/#the-storage-interface]
Local applicationsoften have sophisticated storage needs
function read_and_display_values_places(db){ var thetable = document.getElementById('table1'); db.transaction( function(t){ t.executeSql('SELECT city as cityname, country as countryname, population as thepop FROM places', [], function(t,r) { for (var i=0;i<r.rows.length;i++) { var cityname = r.rows.item(i).cityname; var countryname = r.rows.item(i).countryname; var thepop = r.rows.item(i).thepop; if (thetable) { thetable.innerHTML += "<tr><td scope=\"col\">"+cityname+"</td><td scope=\"col\" width=\"30%\">"+countryname+"</td><td scope=\"col\" width=\"30%\">"+thepop+"</td></tr>"; }}}, function(t,e) { alert('Error:'+e.message); });});}
<body onload="loaded()"> <h1>Minimal <a href="http://www.w3.org/TR/webdatabase/">Web Database</a> Demo</h1> <p>Table: Places</p> <table id="table1" rules="all"><tr><th scope="col">City</th><th scope="col">Country</th><th scope="col">Population</th></tr></table> <p>Table: Currency</p> <table id="table2" rules="all"><tr><th scope="col">Country</th><th scope="col">Currency</th></tr></table> <p>Join of Places and Currency</p> <table id="table3" rules="all"><tr><th scope="col">City</th><th scope="col">Currency</th></tr></table> </body>
function do_the_join(db){ var thetable = document.getElementById('table3'); db.transaction( function(t){ t.executeSql('SELECT city as cityname, currency as currency FROM places, currency where places.country = currency.country', [], function(t,r) { for (var i=0;i<r.rows.length;i++){ var city = r.rows.item(i).cityname; var currency = r.rows.item(i).currency; if (thetable){ thetable.innerHTML +="<tr><td scope=\"col\"> "+city+"</td><td scope=\"col\"> "+currency+"</td></tr>";}}}, function(t,e) { alert('Error:'+e.message); });});}
User agents must implement the SQL dialect supported by SQLite 3.6.19[http://www.w3.org/TR/webdatabase/#web-sql]
bettersolution for storage
local applicationand
Web UIcan be challenging
syncing