Web开发：localStorage vs. 缓存的HTTP

Question

假设我有一个web服务器，响应GET请求为.json文件。该GET的响应指定浏览器将缓存该响应5年。

同时假设我有一个网页，在页面加载时发起该GET请求以获取JSON数据。当响应返回后，JSON数据被放入localStorage中。

此时，如果我想再次检索该JSON数据，哪种方式更快：

1.从localStorage中提取

2.执行另一个Ajax GET请求（浏览器不会实际发出请求-它将访问浏览器缓存）

您能用自动化测试或示例证明吗？

为什么您的答案是正确的？

- FarahBoBara

Answer 1

我认为你提出了错误的问题。在活动会话期间哪个更快基本上是无关紧要的，因为两者都存储在本地，本地查找几乎是瞬间完成的（与远程查找相比）。 （一个注意点：并非所有浏览器都依赖缓存标头，但通常它倾向于过度缓存而不是低于缓存。）

然而，你的示例情况假设浏览器的缓存从未清除。总的来说这是错误的：不仅用户可以随时清除缓存（或设置自动清除），而且浏览器本身也可能随意删除你网站的缓存数据（根据空间，通常）。

相反，你应该考虑数据的持久性以及用户多久会再次寻找它。

如果这些信息只是偶尔访问的内容，则应该依赖于浏览器的内置缓存机制。这允许浏览器在不需要时将其删除。

但是，如果数据是经常加载或每次访问网站都需要的内容，则应使用localStorage。本地存储不会自动清除缓存，实际上通常只有在用户清除该网站的cookie时才会清空。这使得信息可以保留更长时间，即使网站没有被定期访问以保持缓存刷新。但是你现在将突然负责维护该信息数据库。

最后，最重要的问题：作为开发人员，使用更复杂的基于localStorage的解决方案的成本效益是否值得？换句话说，你是否会看到足够的好处来为用户缓存1-2秒的查找，或者你是否在谈论大量信息，在这种情况下用户将看到30秒以上的收益。

例如，对于我一段时间前开发的一个大型复杂Web应用程序，我使用localStorage存储了大量JS库。当重新访问网站时，它们只是从本地副本中解析出来（在验证哈希之后）。即使缓存被清除，这个解决方案也允许各种浏览器看到启动时间的大幅减少。（我不是说这是一个好用途，但那时它起作用了。）

- OverZealous

Answer 2

两个来源都声称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');
});

- select

Answer 3

现代UA（浏览器）中这两种方法的差异应该可以忽略不计。

你为什么问我答案正确？因为我实现了这两种机制。

- c-smile