HTML5本地存储VS应用缓存离线网站浏览

Question

以下步骤：

>

我在Chrome上打开了一个站点:http://www.spritecow.com/
并检查了AppCache：Chrome：//appcache-internals/
，该站点被缓存。

我关闭了Chrome并重新加载了它。缓存还在那里。正是我离线浏览所需要的

>

本地存储存储在客户端计算机上。AppCache存储有什么不同，如果我仍然可以访问它，即使浏览器关闭了。

由于清除缓存将清除AppCache，所以我只使用本地存储。

脱机浏览要遵循的最佳实践是什么？我对此完全陌生，需要一点澄清

链接没有回答这个疑问（AppCache=Application Cache=Web storage的localstorage吗？）因为这给出了区别，但不是基于离线浏览实践的目的（这是这个疑问的目的）。

Answer 1

AppCache使用清单文件来定义应用程序使用的文件应该被存储（您可以缓存文件和重新源，如HTML页面、JS脚本、CSS样式、图像等。）

LocalStorage将存储数据，但不存储页。因此，可以字符串化的每个javascript对象都可以存储在LocalStorage中。

因此AppCache和localStorage并不相同，但它们是互补的。

但问题是，您的日历显示，但为空。这个月的所有会议和活动都不在那里。这是因为您的页面已经存储，但您仍然需要网络来加载日历中的会议。当你离线时，你没有网络...

如果希望所有会议也可以脱机使用，则必须将它们存储在localstorage中（而不是appCache，因为它不是页面，而是由JavaScript访问的数据）因此，您需要从以下方面更改Javascript函数：

function initApp() {
  var data = loadDataWithAjax();
  renderPlanning(data);
}

对此

function initApp () {
  var data;
  if(offline) {
    data = loadFromLocalStorage();
  } else {
    data = loadDataWithAjax();
    storeDataInLocalStorage(data);
  }
  renderPlanning(data);
}