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

Question

经过多篇文章后，我仍然不清楚Local Storage和App Cache Manifest之间的区别。

另请参阅： AppCache = Application Cache = Web Storage的LocalStorage吗？ （SO 10986026）， 应用程序缓存是一个Douchebag （A List Apart）

我的目标是建立一个网站，根据用户需求，允许用户离线访问特定页面。

遵循的步骤：

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

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

• 现在这与本地存储有什么不同？ 试图找到差异，但所有网站都有目的地回答，即模板缓存的AppCache和模板内容的本地存储。

• 某些站点不喜欢AppCache，因为它会为单行更改重新加载整个缓存。 某些网站只选择本地存储。 有些人会选择AppCache（模板）和Localstorage的组合。

现在的疑问是：

• 客户端计算机上的本地存储。 如果我仍然可以访问它，即使浏览器关闭，AppCache存储也会有所不同。

• 由于清除缓存将清除AppCache然后我只去本地存储。

• 离线浏览的最佳做法是什么？ 我对此完全陌生，需要一点清晰

---

编辑

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

Answer 1

AppCache使用清单文件来定义应用程序应该存储哪些文件（您可以缓存文件和资源，如HTML页面，JS脚本，CSS样式，图像......）

LocalStorage将存储数据，但不存储页面。 因此，您可以将stringify的每个javascript对象都存储在localStorage中。

所以AppCache和localStorage不一样，但它们是互补的。

例

想象一下你想要离线使用的网络日历（注意：对于这个例子，我们在这里使用静态页面，数据用javascript加载。同样可以从动态页面制作，但这个例子使用静态）。

appcache将存储html页面及其使用的资源（javascripts，css，images）来呈现页面。 当您在清单文件中放入要为下次离线访问进行缓存的所有内容时，页面将被存储，您将能够在下次访问时离线显示您的页面。

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

如果您希望所有会议也可以脱机使用，则必须将它们存储在本地存储中（不在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);
}

Answer 2

如果您完全脱机并且浏览器已关闭，然后您打开浏览器并在仍处于脱机状态时键入URL，则Appcache甚至可以正常工作 - 页面加载！ 在这里查看此站点 ...在线加载一次，然后断开与Internet的连接并关闭浏览器...然后重新打开浏览器并尝试在离线时访问它。

localStorage首先需要连接才能加载从中获取数据所需的js代码。