Web开发：localStorage与缓存的HTTP

比方说，我有一个Web服务器，它响应GET与.json文件。对该GET的响应指定浏览器将响应缓存5年。Web开发：localStorage与缓存的HTTP

让我们也说我有一个网页，使页面加载时的JSON数据的GET请求。当响应返回时，JSON数据将被放入localStorage。

在这一点上，如果我想要想再次检索JSON数据，这将是更快：

从localStorage
抓取它的执行其他的Ajax GET请求（在浏览器将不会实际上提出请求 - 它将访问浏览器缓存）

你可以用自动化测试或示例来证明它吗？

为什么你的答案正确？

来源

2011-08-21 FarahBoBara

-3

如果在现代UA（浏览器）中这两种方法中的任何一种应该可以忽略不计，那么这些差异将会被忽略。

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

来源

2011-08-21 06:26:18

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

但是，您的示例情况假定浏览器的缓存永远不会被清除。这通常是错误的：不仅用户每次（或者设置为自动清除）都可以清除缓存，但浏览器本身可能会决定随意删除网站的缓存数据（通常取决于空间）。相反，您应该考虑数据的长久性以及用户如何经常再次查找它。

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

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

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

作为一个例子，对于我开发而回一个大的，复杂的web应用程序中，我使用localStorage存储大量JS库。当重新访问该站点时，他们只是从本地副本中解析出来（在验证散列之后）。这种解决方案允许大量的浏览器查看启动时间的大幅减少，即使缓存已被清除。（我并不是说这是一个很好用的，但它的工作的时间。）

来源

2011-08-21 07:14:00 OverZealous

两个消息来源声称，localStorage的跳动浏览器缓存的速度。

这是我对从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'); 
});

来源

2015-03-08 21:49:24 select

Web开发：localStorage与缓存的HTTP

回答

相关问题