decent html5 offline storage and caching examples

I found this example, it is the simplest / best thing I have seen with localstorage. It only demonstrates the local (persistent) storage, not database storage. Also, if you want session storage, just change "localStorage" to sessionStorage"

The javascript couldn't be any simpler I think.

w3.org example

And yes, it works fine with FF (at least for me.)

I recommend looking at the CSS Ninja's Font Dragr demonstration which, although primarily designed to demonstrate the File API for HTML5 using Firefox, also makes use of Offline Storage.

If nothing else, this guy knows his stuff and can suggest good examples.

I've found this pretty good page of html5 demos recently so thought I'd post it back here.

html5demos.com

Edit - another link that may help:

From the Google Chrome development team comes HTML5rocks, a site to feature and educate webmasters on the awesome new features of HTML5.

www.html5rocks.com

Edit #2 - this is one of the best articles I've come across yet:

wrapping things nicely with html5 local storage

Knowing offline storage is supported by all the major browsers now, I put up a jQuery plugin for handling form state. http://www.jasonsebring.com/dumbFormState and the source is small and easy to understand.

I recommend the approach to do serialization using Douglas Crockford's JSON2.stringify : https://github.com/douglascrockford/JSON-js to take an object in JavaScript and turn it into a JSON string. Then you can save that to either window.sessionStorage or window.localStorage easily like so:

// setting data

window.sessionStorage['mydata'] = JSON.stringify(someObject);

// getting it back

someObject = jQuery.parseJSON(window.sessionStorage['mydata']);

Another thing to think about is namespacing your keys. For what I was doing, I wanted it automatic so key names were saved based off 'dumbFormState-' + window.location.pathname + '-' + form index to ensure the keys were automatically unique then you could loop through them later do delete them by checking the prefix 'dumbFormState-' matching they keys as you don't want to delete any other stuff on there that people may use.

Hope that helps a bit.