views:

900

answers:

2

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?

+3  A: 

I think in this case you should consider offline caching:

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

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.

Paul Rouget
Can you benefit from caching without the site being offline? Or is it better to leave it to the browser to do it for stylesheets and JavaScript (using a far expires heading, and setting a 304 header - although that would put extra work on PHP or ASP.NET). Images take up a lot of bandwidth and are not changed, but still being downloaded (as though the browser cache is not working properly)
Sam
The files are fetched only if you update your manifest (regardless client connection status).
Paul Rouget
A: 

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.

garrow