假设我有一个web服务器，它响应一个带有.json文件的GET。对该GET的响应指定浏览器将该响应缓存5年。
假设我有一个网页，在页面加载时对JSON数据进行GET请求。当响应返回时，JSON数据被放入localStorage。
此时，如果我想再次检索JSON数据，这将更快:
- 从
localStorage获取 - 执行另一个Ajax GET请求(浏览器实际上不会发出请求——它将访问浏览器缓存)
您能用自动化测试或示例证明它吗?
为什么你的答案是正确的?
我想你问错问题了。在活动会话期间，哪个更快基本上无关紧要，因为两者都存储在本地，本地查找几乎是即时的(与远程查找相比)。(一个警告:不是所有的浏览器都依赖缓存头，但通常它更倾向于过度缓存，而不是缓存不足。)
但是，您的示例情况是假设浏览器的缓存永远不会被清除。这通常是错误的:用户不仅可以随时清除缓存(或将其设置为自动清除)，而且浏览器本身可能会决定删除您网站的缓存数据(通常取决于空间)。
相反，你应该考虑数据的寿命，以及用户再次查找数据的频率。
如果这些信息是他们可能只是偶尔访问的东西，那么你应该依靠浏览器的内置缓存机制。这允许浏览器在不再需要它时删除它。
但是，如果数据是定期加载的，或者需要每次访问站点，那么您应该使用localStorage。本地存储是而不是与缓存自动清除，事实上，通常只有在用户清除该网站的cookie时才会清空。这使得信息可以保留更长的时间，即使网站没有经常访问，也可以保持缓存刷新。但是你现在突然要负责维护这个信息数据库了。
最后，最重要的问题是:作为开发人员，开发更复杂的基于localStorage的解决方案的成本-收益权衡值得吗?换句话说，您是否会看到最终用户缓存1-2s查找的足够好处，或者您谈论的是大量信息，而用户将看到30 +的增益。
作为一个例子，对于我之前开发的一个大型、复杂的web应用程序，我使用
localStorage来存储大量的JS库。当重新访问站点时，它们只是从本地副本解析(在验证哈希之后)。这个解决方案允许大量的浏览器看到启动时间的大幅减少，即使缓存被清除。(我不是说这是一个很好的用途，但它在当时是有效的。)
两个来源都声称localStorage在速度上优于浏览器缓存。
- http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/
- http://jsperf.com/localstorage-versus-browser-cache
这是我从localStorage加载JavaScript文件的看法。代码很小，你可以在我的Github项目https://github.com/webpgr/cached-webpgr.js上查看它，或者从下面的完整示例中使用代码。
完整库:
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)};
调用库
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');
});
这两种方法的差异在现代的ui(浏览器)中应该可以忽略不计。
你问为什么我的答案是正确的?因为我实现了这两种机制