为什么localStorage不用于存储静态资源?

时间:2013-03-20 23:14:17

标签: javascript html5 local-storage application-cache

这个问题在逻辑上遵循这个问题:

Is HTML5 application caching relevant?

很明显,热门网站没有使用HTML 5应用程序缓存来保存静态资源。

只需检查<html>标记中的清单属性即可。它不存在。

进一步研究HTML5 localStorage也没有被使用。

作为测试用例,我查看了

  • www.google.com
  • www.twitter.com
  • www.facebook.com

只需进入控制台并输入

即可
localStorage.

并且控制台应该弹出一个键列表。

这些网站都没有将静态数据保存到磁盘上吗?

为什么会这样?

对于没有改变的资源来说,打击网络似乎是浪费资源。

详细说明。如果单击“重新加载”,该页面将重新下载静态资源。使用Google,您甚至可以在URL路径中看到“静态”一词。但是对于这个问题,我使用了这个词的概念含义。

1 个答案:

答案 0 :(得分:6)

  

很明显,热门网站没有使用HTML 5应用程序缓存来保存静态资源。

您误解了应用程序缓存的设计目的。这是应用程序缓存规范的第一段:

  

为了使用户能够继续与Web应用程序和文档进行交互,即使他们的网络连接不可用 - 例如,因为他们在ISP的覆盖范围之外旅行 - 作者可以提供清单,列出所需的文件使Web应用程序脱机工作,并使用户的浏览器保留文件的副本以供脱机使用。

     

http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#introduction-5

因此,应用程序缓存旨在允许Web应用程序作者在网络连接不可用时使其应用程序正常工作。

我无法想象如果没有网络连接,Google,Twitter或Facebook可以如何有效地工作。它们都依赖于用户在其服务器上与大量数据(在Twitter和Facebook的情况下,关于其他用户的数据)进行交互。没有网络连接,它们本身就没用了。

同样,localStorage不是为存储可能更改的页面资源而设计的。 (我认为你建议这些网站可以在localStorage中存储CSS,JavaScript和图像文件 - 如果我误解了就道歉。)

  

本规范引入了两种相似的机制,类似于HTTP会话cookie,用于在客户端存储结构化数据......

     

第一个是针对用户执行单个交易但可能同时在不同窗口中执行多个交易的场景而设计的......

     

第二种存储机制设计用于跨越多个窗口的存储,并且持续超出当前会话。特别是,出于性能原因,Web应用程序可能希望在客户端存储兆字节的用户数据,例如整个用户编写的文档或用户的邮箱......

     

http://www.w3.org/TR/webstorage/#introduction

为了将localStorage用于CSS,JavaScript和图像文件,您需要在页面中使用一些JavaScript来检查localStorage页面所需的每个资源,然后(不知何故)检查服务器查看是否有更新的版本,必要时抓取它,然后将资源添加到页面的DOM中(如果它是新的,则将其存储在localSorage中)。

这是基本上复制Web浏览器已经执行的缓存的大量代码。当您的JavaScript正在检查localStorage和服务器时,页面将停止呈现。而当浏览器本身下载CSS和图像文件时,页面可以继续进行渲染。