Question

I would like to use localStorage to ‘cache’ some JS and CSS files in a web app that is primarily used on mobile devices (i.e., bandwidth restrictions). I’m thinking it would work something like this:

1. The page loads with a small setup.js containing code that checks localStorage to see if bigScriptFile.js has been stored previously.
   1. If it’s not stored, bigScriptFile.js is downloaded and stored for the next visit.
   2. If it has been stored, then bigScriptFiles.js is read from localStorage and loaded/run as if it was downloaded like a normal file (i.e., <script src="http://example.com/bigScriptFile.js"></script>)

What I’m not sure how to do is step 1.1 — storing the JS file. (I know that I can only store strings in localStorage and I know how to use JSON.stringify().)

Surely it’s not as simple as using escape():
localStorage.setItem('bigScriptFile', escape('myJScode')) to store, and
unescape(localStorage.getItem['bigScriptFile']) when retrieving

Even if it is that easy, how do I use JS to get the contents of bigScriptFile.js as a string? Perhaps by making an ajax call to a PHP script that returns the contents?

Answer 1

You should rather put the correct cache headers on js files or look at the HTML5 cache manifest.

W3C specification.