APIs in HTML5 at Jinal Desai .NET

Articles from Jinal Desai .NET
APIs in HTML5
2012-12-29 19:12:54 Jinal Desai

Storage APIs in HTML5

Storage APIs are HTML5 answers to browser cookies limitations. These APIs allows
developers to store some basic information and values that can be user specific
and tame cookies limitations like it’s length, number of cookies per website and
many more. Typical examples of such information are saving game state, saving
navigation locations, etc. The size restriction of storing data using Storage APIs is
around 5MB. This limit is suggested by W3C, but the specs provide some room for
implementation details. So actual size depends on browser, but it does not fluctuate
that much.

Local Storage
It is basic implementation of storing data locally on user’s machine. It is a key/value
pair collection. It is window.localStorage. It allows application to run offline with some
data stored on user’s machine like user’s name and preferences.

You can use localStorage object without window. Like you can use it directly as
localStorage instead of window.localStorage. However, it is better code practice to
use window.localStorage.

To check browser is supporting window.localStorage or not you can use following
function.
function isLocalStorageAvailable() {
try {
return 'localStorage' in window &&
window['localStorage']!==null;
}
catch(err) {
return false;
}
}

Storing value in localStorage is very easy with it’s setItem function.

if(isLocalStorageAvailable) {
window.localStorage.setItem("Name","Jinal Desai");
}

To get it back use getItem function of localStorage.

var Name = window.localStorage.getItem("Name");
}

How to clear it? To clear all the data stored in the localStorage API use clear
function.
window.localStorage.clear();
}

To remove only particular item from localStorage you can use it’s removeItem

function.

window.localStorage.removeItem("Name");
}

Session Storage
The window.sessionStorage stores information for a single session only. The
information is lost when the user ends the session. All the functionality is same as
window.localStorage you just need to replace sessionStorage instead of
localStorage in all above examples.

Difference between Local Storage and Session Storage
The main difference is that localStorage persists information over different tabs or
windows, even if we close the browser according to the domain’s security policy
user’s choice about quota limit.

While with sessionStorage when HTML document is created, the user agent must
see to check if document’s top level browsing context has allocated a session
storage area for that document’s origin. If it has not, a new storage area for that
document’s origin must be created. So each document object has separate object
for it’s windows sessionStorage attribute. In summary, the sessionStorage object
does not persists if we close the tab/window or it does not exists if we access the
stored value via different tab/window.

AppCache API in HTNL5
In some scenarios storing user’s information in bits and pieces is not enough. You
need to store much more data so that entire application can work offline. HTML5 has
provided caching functionality so that you can cache entire file/files. So when user is
offline browser can access cached resources.

Cached resources are local thus it loads faster, it reduces server load and also
supports browsing without internet connection. AppCache API is maintaining
manifest file(.mf) for keeping track of cached pages. To enable cache, include
manifest attribute on documents html tag.
<html manifest="http://jinaldesai.net/manifest.mf">
...
</html>

Once you include manifest attribute on html document, it will automatically cache
entire html page.

Following is example of typical manifest file. The paths of all the files caches are
relative.

//Manifest file start here.
CACHE MANIFEST //Every manifest file starts with CACHE MANIFEST

NETWORK: //Network files are never cached.
share_Prices.php

FALLBACK: //Files that wasn’t cached or wasn’t save correctly
//and need to give message to user.
message_Offline.html

CACHE: //Actual cached resource.
index.html
style.css
images/logo.png

//Manifest file ends here.

To know cache status use following code.

var applicationCache = window.applicationCache;
applicationCache.status === applicationCache.UNCACHED
applicationCache.status === applicationCache.IDLE
applicationCache.status === applicationCache.CHECKING
applicationCache.status === applicationCache.DOWNLOADING
applicationCache.status === applicationCache.UPDATEREADY
applicationCache.status === applicationCache.OBSOLETE

To update cache.
var applicationCache = window.applicationCache;
applicationCache.update(); //Update user's cache
if(applicationCache.status == window.applicationCache.UPDATEREADY) {
applicationCache.swapCache();
//swap updated user's cache with old stored cache
}

Events in AppCache API
applicationCache.addEventListener('cached', handleCacheEvent, false);
//first time cache
applicationCache.addEventListener('checking', handleCacheEvent, false);
//checking for update
applicationCache.addEventListener('downloading', handleCacheEvent, false);
//update is available and browser is downloading update
applicationCache.addEventListener('error', handleCacheError, false);
//404 or 410, downloading failed or manifest changed
//when download in progress
applicationCache.addEventListener('noupdate', handleCacheEvent, false);
//first download
applicationCache.addEventListener('obsolete', handleCacheEvent, false);
//4040 or 410, cache being deleted
applicationCache.addEventListener('progress', handleCacheEvent, false);
//cache being fetched
applicationCache.addEventListener('updateready', handleCacheEvent, false);
//when manifest newly downloaded

Conclusion
As browser and user experiences is eveolving, HTML5 has evolved to store
information locally at user’s machine. You can use localStorage or sessionStorage
to store name/value pairs of user/application specific values or you can cache
multipages to let your user work offline.

APIs in HTML5 at Jinal Desai .NET

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

APIs in HTML5 at Jinal Desai .NET