HTML5 local storage 1-2-3

1:21 PM Xun 0 Comments

A lot of excitement about HTML5 tends to be about the infinite multimedia can-dos, videos, audios and canvas combined with ever-more powerful JavaScript, but localstorage is also one of the cool things about HTML5, without which a lot of games probably will be slow to a crawl.

LocalStorage is much like a cookie, in that they are both sweet and energy-packed. A cookie is limited in size, 4kb; while most browsers can have a local storage as big as 4mb. Also cookies are sent back and forth with every request for javascript files, images, ajax data calls, this adds a lot of unnessary bandwidth.




Browser side localstorage has two forms:
sessionStorage
and
localStorage
. They are essentially the same, other than that
sessionStorage
resets itself when a session restarts, while
localStorage
persists across browsers restarts.

It is easy to set, remove and retrieve localstorage key-value pairs.


var cacheKey = "demoData" + Id;

//set
localStorage.setItem(cacheKey, demoData);

//get
var demoData = localStorage.getItem(cacheKey);

//remove
localStorage.removeItem(cachekey);

You can also manage your localstorage through chrome's developer tool.




One big catch,
localstorage
stores everything as a string, so if you want to store an object, say for example, a JSON object, most likely you will get something useless like "[object object]". To circumvent this, you need to string-fy your object first, then store it, then parse it back into object when you are ready to use it. As in the following:


// a function to store JSON data returned from AJAX
var saveData = function (data) {
//parse the string data back to JSON object
var strdata = JSON.stringify(data)
localStorage.setItem(cacheKey, strdata);
var value = localStorage.getItem(cacheKey);
//parse the string data back to JSON object
dosomething(JSON.parse(value));
};


And the following is a snippet of code that checks for if local storage with certain key exists, if yes, operate on it; if no, ajax it, then store it.


var GetData = function (id) {

cacheKey = "demo_" + id;

var value = localStorage.getItem(cacheKey);
if (value) {
doSomething(JSON.parse(value));
}
else {
common.Ajax(ajaxUrl, saveData, onError);
}
}


Since it is possible for us to go offline sometimes, it is quite possible we make changes to localstorage offline. And it would be upsetting if we would loose that information when online. So there is some techniques to sync the offline data with server.

The following is some code stolen from http://hacks.mozilla.org/2010/01/offline-web-applications/, that does the following:


1. If you set your status and you’re online, it sends the status.
2. If you set your status and you’re offline, it stores your status.
3. If you go online and have a stored status, it sends the stored status.
4. If you load the page, are online, and have a stored status, it sends the stored status.



function whatIsYourCurrentStatus() {
var status = window.prompt("What is your current status?");
if (!status) return;
if (navigator.onLine) {
sendToServer(status);
} else {
saveStatusLocally(status);
}
}

function sendLocalStatus() {
var status = readStatus();
if (status) {
sendToServer(status);
window.localStorage.removeItem("status");
}
}


window.addEventListener("load", function() {
if (navigator.onLine) {
sendLocalStatus();
}
}, true);

window.addEventListener("online", function() {
sendLocalStatus();
}, true);

window.addEventListener("offline", function() {
alert("You're now offline. If you update your status, it will be sent when you go back online");
}, true);


Nowadays, it is hard to find any pure DIY (do-it-yourself) javascript, everyone relies on one or multiple JavaScript libraries. For localstorage management, we have DSt. DSt is "simple, lightweight JavaScript library for using HTML5 DOM stroage".


jStorage is another one.

"jStorage is a simple wrapper plugin for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side. Note that functions, DOM nodes, host objects and such can not be saved.".

0 comments: