CODEWITHSUNDEEP
jqueryhtml
Nils
Nils

Reputation: 1237

decent html5 offline storage and caching examples

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:

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

Upvotes: 8

Views: 14507

Answers (5)

Nils
Nils

Reputation: 1237

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

Upvotes: 1

King Friday
King Friday

Reputation: 26096

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.

Upvotes: 0

Paul Hoffer
Paul Hoffer

Reputation: 12906

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

Upvotes: 3

Nickolay
Nickolay

Reputation: 32073

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

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

Upvotes: 3

Phil.Wheeler
Phil.Wheeler

Reputation: 16858

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.

Upvotes: 1

Related Questions