javascript - Web 开发 : localStorage vs. 缓存 HTTP

Question

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

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

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

1. 从 localStorage 获取它
2. 执行另一个 Ajax GET 请求(浏览器实际上不会发出请求——而是访问浏览器缓存)

你能用自动化测试或例子来证明吗？

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

Answer 1

我觉得你问错了问题。 在事件 session 期间哪个更快基本上是无关紧要的，因为两者都存储在本地，并且本地查找几乎是即时的(与远程查找相比)。 (一个警告:并非所有浏览器都依赖缓存 header ，但通常它更倾向于过度缓存，而不是缓存不足。)

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

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

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

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

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

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.)