APIs in HTML5

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.

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

How to clear it? To clear all the data stored in the localStorage API use clear function.

if(isLocalStorageAvailable) {
   window.localStorage.clear();
}

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

if(isLocalStorageAvailable) {
   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
0 votes, 0.00 avg. rating (0% score)

2 Comments

  1. HTML5 History API and Geolocation | Jinal Desai .NET

    […] There is window.navigator object provided to play with geolocation. We check whether browser is supporting the API or not in a similar manner we checked with Storage API and AppCache API I explained in my previous article. […]

    Reply

  2. Exam Ref 70-486: Developing ASP.NET MVC 4 Web Applications | Jinal Desai .NET

    […] Storage APIs and AppCache API in HTML5 […]

    Reply

Leave a Reply

*


*