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

html, local-storage

Solution

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.

Problem

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 data (e.g. images), rather than hitting the server each time? Would that just complicate things - since I assume you would have to add the linked asset via JavaScript rather than just a `script` or `link` element, breaking the page for those without JavaScript enabled)? Unless you can parse the content (using `HEAD` requested to check last modified date and other headers) before the browser downloads it. Or best just to stick with `304 Not Modified` and `eTag` headers?

Original source