BANGALORE, INDIA: One of the limitations of the Web so far has been that we always have to be connected online to use it. To make the Web truly compete with desktop or other native apps, we need a way to run web applications in an offline environment too.

Till now it wasn't really feasible to do so, but with HTML5 and other upcoming technologies, it has become possible. In this article we'll take a look at how to do so.

Storing data for offline use 

Till now we did not have a reliable way to store data on the client side for offline usage. Sure, we have cookies, but their storage limit is really low, and there are no programmatic APIs as such to make storing and retrieving data from it easy and robust. We needed a new way to do it, and the W3C has come up with an API called the Web Storage API for this purpose.

The Web Storage API has ways to store data for two purposes. One is called 'Session Storage' which is for storing data temporarily just for that session. Once you close the window or tab, its gone. The other is called 'Local Storage', which is much more persistent. Even if you close the tab or window, but load the site up again in a new tab or window, the data should persist until the time you explicitly delete it using your browser's preference options.

We'll focus on local storage, and see how data can be stored in the browser in a persistent manner with it. Using it is quite simple really. It works in the following way:
localStorage.setItem (yourkey, yourvalue); //sets the key and value associated with it
localStorage.getItem(yourkey); //will return a value associated with that key
For example, in the JavaScript of your page, just write the following:
localStorage.setItem (?India?, ?Rupee?);
localStorage.setItem (?USA?, ?Dollar?);
localStorage.setItem (?Japan?, ?Yen?);
The above code will store country names as keys, and the corresponding currencies as values.
Then if you write something like:
var currency = localStorage.getItem(?India?);
the value of 'currency' will now be 'Rupee'
Keep in mind that information is stored as strings here, so if you are storing a numerical value, and try to retrieve it back, then convert its type from a string, to a float or something similar.

Storing files needed to run the application offline
We've seen how to store the data for offline usage, but how about the actual files which are needed to run an app offline? Till now we had to reply on the browser cache, but it was unreliable and once again, we did not have a programmatic API to control which files needed to be cached in which way.

So in HTML5, you have a new feature called offline applications. Modern browsers, like Opera, which have advanced support for HTML5, support this. It calls for browsers to support a special type of cache called 'Application Cache', or 'AppCache' for short. The AppCache is a special type of cache which will store the files needed to run the application offline reliably and with greater programmatic control. Lets see how this works.