Web 开发：localStorage 与缓存 HTTP

Posted 2023-03-05

【中文标题】Web 开发：localStorage 与缓存 HTTP

【英文标题】：Web development: localStorage vs. cached HTTP

【发布时间】：2011-10-31 11:47:24

【问题描述】：

假设我有一个使用.json 文件响应GET 的Web 服务器。对该 GET 的响应指定浏览器将响应缓存 5 年。

假设我有一个网页，它在页面加载时对 JSON 数据发出 GET 请求。当响应返回时，JSON 数据被放入localStorage。

此时，如果我想再次检索该 JSON 数据，会更快：

从localStorage获取它 执行另一个 Ajax GET 请求（浏览器实际上不会发出请求，而是访问浏览器缓存）

您能否通过自动化测试或示例来证明这一点？

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

【参考方案1】：

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

【参考方案2】：

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

但是，您的示例情况是假设浏览器的缓存永远不会被清除。这通常是错误的：用户不仅可以随时清除缓存（或将其设置为自动清除），而且浏览器本身可能会决定随意删除您网站的缓存数据（通常取决于空间）。

相反，您应该考虑数据的寿命，以及用户再次查找数据的频率。

如果这些信息是他们可能只是偶尔访问的东西，那么您应该依赖浏览器的内置缓存机制。这允许浏览器在不再需要它时将其删除。

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

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

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

【参考方案3】：

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

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