decent html5 offline storage and caching examples

Question

I'm keen to test out html offline storage and caching with a view to developing a prototype to show off the offline web application capabilities of html5.

I've found some webkit-specific samples, but I'm battling to find any decent code samples that even work at all in Firefox 3.6

For a sample, I'd be happy with something that works with the following:

• Our company uses jquery extensively so I'd prefer samples that use that library or pure javascript.
• It should at least work on firefox (3.6+ is fine)

Can anyone point me to some links that provide some guidance and code samples?

Answer 1

See http://hacks.mozilla.org/?s=localStorage

Firefox doesn't support SQL database API, if that's what you're looking for.

Answer 2

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.)

Answer 3

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.

Answer 4

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