HTML5 localStorage for assets (stylesheets, JavaScript, images etc)

Question

To save both client download time and network usage, is it possible to use the localStorage feature of HTML5 to store contents of linked stylesheets, javascript files and binary

Answer 1

I think in this case you should consider offline caching:

• https://developer.mozilla.org/en/Offline_resources_in_Firefox#Specifying_a_cache_manifest

You can also store user input data in localStorage or sessionStorage:

• https://developer.mozilla.org/en/DOM/Storage#sessionStorage
• https://developer.mozilla.org/en/DOM/Storage#localStorage

Don't use globalStorage (not a standard).

I've written an article about offline, see: http://hacks.mozilla.org/2010/01/offline-web-applications/

It's about offline, but such mechanism can be used to boost your web app.

Answer 2

You could base64 encode your image/binary data and store it as a string in localStorage, using base64 urls doesn't work in a few browsers so it's not a perfect solution.

CSS and js would be fine, you could write them into the page, or use a base64 url also.

I wouldn't worry about doing this breaking the site for non JS users, as is JS is disabled you cant access localStorage anyway.