UPDATE 2: HTML 5 Offline Application Caching (Javascript localStorage and sessionStorage) – A very simple, reasonably complete example

I’ve recently begun to try to make a bit of time to start experimenting with some newer aspects of web-development – mainly the forthcoming HTML 5), it’s all about staying ahead of the game!

I’m going to document what I learn, partly for selfish reasons – I learn much better if I document the information and partly because I hope it might be helpful to someone. The advent of HTML 5 offers one of the most anticipated new features in a fair few years which I am hoping should be generally usable before too long, HTML 5 Offline Application Caching which uses Javascript localStorage/sessionStorage and online/offline status events/indicators.

Javascript localStorage allows you to store any data you wish in a key/value pair – data stored persists even after the browser is closed. Javascript sessionStorage works in the same way except that it expires when the browser is closed, much in the same way a PHP session does.

Right now (at the time of writing) the browsers in popular use which support Javascript localStorage and sessionStorage are Firefox 3.5+, Safari 4+, Internet Explorer 8 and Google Chrome 4+ (Wikipedia has a compatibility table of Browsers which support Javascript local/session storage will hopefully be maintained – “Web Storage” is the row you’ll be looking for in that table).

So, on to the syntax for localStorage/sessionStorage, it’s really, really simple:

Javascript localStorage:
Setter: window.localStorage.setItem(KEY, VALUE)
Getter: window.localStorage.getItem(KEY)
Remove: window.localStorage.removeItem(KEY)

Javascript sessionStorage:
Setter: window.sessionStorage.setItem(KEY, VALUE)
Getter: window.sessionStorage.getItem(KEY)
Remove: window.sessionStorage.removeItem(KEY)

UPDATE: In working on my next HTML5 experiment into Geo Location, I found a handy article on mozilla.org which also states that you can use simpler, dot-syntax notation e.g.:

Javascript localStorage:
Setter: window.localStorage.KEY=VALUE
Getter: window.localStorage.KEY
Remove: delete window.localStorage.KEY

Javascript sessionStorage:
Setter: window.sessionStorage.KEY=VALUE
Getter: window.sessionStorage.KEY
Remove: delete window.sessionStorage.KEY

I’ve just done a simple test and it works fine for me on FireFox 3.6.3 on OSX.

It is worth noting that window.localStorage stores only strings…and explicitly strings so you must use a cast such as window.localStorage.KEY.toInt() if you want to use the stored value as an integer.

I have put together a really, really simple, reasonably complete example of Javascript localStorage (please don’t mock, it was put together in minimal time!) which is really uninspiring but demonstrates:

• JavaScript localStorage (which is identical in usage to JavaScript sessionStorage) – my example above is reasonably complete
• On-line/Off-line detection
• Manifest files

The example above simply allows you to save/load/remove whatever data you care to type into the textarea using Javascript localStorage. It also detects your on-line/off-line status and contains a Manifest which is simply a document instructing your browser which files it must cache in order to allow you to use the “application” when you are off-line.

The on-line/off-line detection is as simple as checking the Javascript property navigator.onLine which is a boolean (true/false).
It’s worth mentioning at this point that (in supporting browsers) according to the specification, you can add Javascript event listeners to detect changes in on-line/off-line status in native Javascript as follows:

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

and

window.addEventListener("offline", function()
{
  do_something();
}, true);

It seems that MooTools does not yet support the online/offline events as MooTools addEvent() syntax doesn’t work (at the time of writing).

The Manifest file must be sent from your web-server with a specific mime-type: text/cache-manifest and should contain “CACHE MANIFEST” (without the quotes) on the first line followed by the paths and filenames of files you wish to cache, one file per line (I am guessing you can use either relative or absolute paths – though I have only tried relative paths). Probably the simplest way to achieve this without messing around with your web-server settings is to create a server-side script which will output the correct header and Manifest data for you, I just made a PHP script like this:

<?
header("content-type:text/cache-manifest");
echo "CACHE MANIFEST
index.html
cnet.220.js
ols.js
ols.css";
?>

Sure enough, after adding the Manifest file, Firefox (3.6 OSX) displayed a grey bar at the top of the HTML window asking my permission for the web page to store documents for offline use (image cropped in width):

If there are files which you want to make sure definitely do not get cached for offline use, you can specify them after a heading line “NETWORK:”, so the Manifest file would look like this:

CACHE MANIFEST
index.html
cnet.220.js
ols.js
ols.css
NETWORK:
do-not-cache.php

So, that’s the end of experiment 1 in HTML 5…more will follow soon as time permits.