Web development: localStorage vs. cached HTTP

Question

Let's say I have a web server that responds to a GET with .json file. The response to that GET specifies that the browser cache the response for 5 years.

Let's also say I have a web page that makes that GET request for the JSON data when the page loads. When the response comes back, the JSON data is put in localStorage.

At this point, if I want to want to retrieve that JSON data again, which will be quicker:

1. Fetching it from localStorage
2. Executing another Ajax GET request (where the browser won't actually make the request--it will access the browser cache instead)

Can you prove it with an automated test or example?

Why is your answer correct?

Answer 1

Both sources claim that localStorage beats browser cache in speed.

• http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/
• http://jsperf.com/localstorage-versus-browser-cache

Here is my take on loading JavaScript files from the localStorage. The code is tiny, you can check it out at my Github project https://github.com/webpgr/cached-webpgr.js or user the code from the full example below.

The complete library:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

Calling the library

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});

Answer 2

I think you are asking the wrong question. Which is quicker during an active session is basically irrelevant, because both are stored locally, and local look up is almost instantaneous (vs remote lookup). (One caveat: not all browsers rely on the caching headers, but usually it leans more toward over-caching, rather than under-caching.)

However, your example situation is making the assumption that the browser's cache is never cleared. This is wrong in general: not only can the user clear the cache whenever (or have it set to auto-clear), but the browser itself may decide to remove your website's cached data at will (depending on space, usually).

Instead, you should be thinking about the longevity of the data, and how regularly the user will be looking for it again.

If this information is something that they might only access occasionally, then you should rely on the built-in caching mechanism of the browser. This allows the browser to remove it when it is no longer needed.

However, if the data is something that is loaded regularly, or needed every visit to the site, then you should be using localStorage. Local storage is not cleared automatically with the cache, and in fact is usually only emptied if the user clears the cookies for that website. This allows the information to be retained for much longer, even if the website isn't visited regularly enough to keep the cache refreshed. But you will suddenly now be responsible for maintaining that database of information.

Finally, the most important question: as a developer, is the cost-benefit trade off of developing a more complex localStorage-based solution worth it? In other words, are you going to see enough benefit to the end user caching a 1-2s lookup, or are you talking about a significant amount of information, where the user will see a 30s+ gain.

As an example, for a large, complex web application I developed a while back, I used localStorage to store the large number of JS libraries. When re-visiting the site, they were simply parsed from the local copy (after verifying the hash). This solution allowed a wide range of browsers to see a massive reduction in startup time, even if the cache was cleared. (I'm not saying this is a good use, but it worked at the time.)