Great read, just curious about secure this is? Not that you would want to cache sensitive data. Is there a way of encrypting what is stored?

Will add this to the ever expanding to-look-at list!

Firefox throws an exception when the localStorage data is larger than 1024bytes so it’s a far cry from the 5mb limit in the spec.

Native JSON is in most stable release browsers now: IE8, Safari 4 (need 4.0.3) and Chrome 3 so it has pretty wide support now.

I was somehow not aware of the fact that IE8 supports session/local storage. Wow, it now seems like the technology is ready to use.

Thanks for the great article!

Excellent article, although you didn’t mention the third offline technology that only Safari has currently: offline SQL database.

Very nice writeup, Remy.

Nicholas Zakas mentioned in his writeup on sessionStorage that:

Firefox 3 and 3.5 throw errors when you try to access sessionStorage if cookies are disabled on the browser. bug

So testing window.sessionStorage can do that..

In Modernizr development, I’ve seen fearphage present this as a solution:

The new capabilities in HTML5 are spell-bounding and will really help push the transition from websites being internet-only to fully fledged desktop apps. Very exciting. Great read!

Firebug allows you to browse localStorage (see the “DOM” tab).

@Remy: Any comment on the difference in memory management and performance between storing a ton of data in memory (as an object or array, for example) and using local/sessionStorage?

I’m thinking for example of a Google Maps implementation where you need to manage a lot of locations/markers/data; in that instance, using the equivalent of a local database to store and retrieve the data sounds like a great solution, but only if it’s going to perform better than simply storing it all in a big array.

@RYAN SEDDON – cheers for pointing that out – I hadn’t spotted that the other browsers had JSON support baked in.

@DEVON GOVETT – yep, Safari has Web Databases as well as Web Storage, but from my playing around, I can’t see any advantage database has over storage. Sure you can do complicated queries, but 99% of the time I have a key and just want to get the value out. Similar to the CouchDB model. Also Web Database is only available in Safari (possibly Chrome, I’ve not checked), whereas Web Storage is available in 3 of the big 4.

@JOHANNES GORSET – cheers for pointing out that the DOM tab introspects the storage object. It seems a bit lame compared to Safari’s DB view, but I guess the data’s still the same!

@MATTHEW PENNELL – I’ve not tested memory management or performance yet, so when I find time, I’ll have a play around.

@REMY SHARP – Before Safari 4 no version of Safari supported Web Storage, but Safari 3.1+ have supported Web Databases, so sometimes you might need to combine solutions to get the widest possible browser support. Also, if you have written a backend in a language like PHP to store data in Mysql, and you want to port it to JavaScript to run client side and offline, it is certainly easier to do with web databases since you can use the same queries. Just a thought.

HTML5 is great but without IE’s support we don’t have any advantage because unfortunately it’s the most used browser.
And again we going to use JS to rescue. :)

This was an excellent read, HTML5 is long overdue.

Great article, thank you!

You may find PersistJS useful. It is a wrapper library for all the offline storage APIs (global/localStorage, Safari’s SQLite, Gears, Flash, and IE’s old userData), so it supports almost every browser. It’s like dojo storage, but standalone and with more backends.

http://pablotron.org/software/persist-js/

Remy is correct when he says that debugging can be a real PITA when you are using a manifest file. A technique I’ve found useful is to monitor your web server logs while running your app to see exactly what resources your browser is requesting.

For example:

1) ssh into your server

2) cd to your log directory (prolly /var/log/httpd/ or /var/log/apache2/)

3) Run: sudo tail -f access_log

4) Reload your app in the browser; your request(s) should pop into the terminal.

When you are done watching the log, press Control-C to quit the tail process.

You can also inspect the ApplicationCache sqlite database manually using sqlite3 at the command prompt (with Safari on Mac, at least – not sure about others).

More here if y’all are interested:
http://building-iphone-apps.labs.oreilly.com/ch06.html

Cheers!