Web开发:localStorage与缓存的HTTP

Question

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

我们还说我有一个网页,在页面加载时对JSON数据进行GET请求.当响应返回时,将放入JSON数据localStorage.

此时,如果我想再次检索该JSON数据,这将更快:

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

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

Answer 1

我想你问的是错误的问题.在活动会话期间哪个更快,基本上是不相关的,因为两者都存储在本地,并且本地查找几乎是瞬时的(与远程查找相比).(需要注意的是:并非所有浏览器都依赖于缓存标头,但通常它更倾向于过度缓存,而不是缓存不足.)

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

相反,您应该考虑数据的寿命,以及用户再次寻找它的频率.

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

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

最后,最重要的问题是:作为一个开发人员,开发一个更复杂localStorage的解决方案是否值得的成本效益交易呢？换句话说,您是否会看到最终用户缓存1-2s查找的足够好处,或者您是在谈论大量信息,用户将看到30s +增益.

作为一个例子,对于我开发的大型复杂Web应用程序,我曾经localStorage存储过大量的JS库.当重新访问该站点时,只需从本地副本解析它们(在验证哈希之后).该解决方案允许各种浏览器看到启动时间的大幅减少,即使缓存已被清除.(我不是说这是一个很好的用途,但它当时有效.)

Answer 2

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

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