HTML5本地存储与应用程序缓存：离线网站浏览

Question

HTML5本地存储与应用程序缓存：离线网站浏览

javascripthtmllocal-storagehtml5-appcachecache-manifest

15

经过多篇文章的阅读，我仍然不清楚本地存储(Local Storage)和应用程序缓存清单(App Cache Manifest)之间的区别。

相关参考：Is AppCache = Application Cache = Web Storage's LocalStorage? (SO 10986026), Application Cache is a Douchebag (A List Apart)

我的目标是建立一个网站，使特定页面能够在用户需要时离线浏览。

已执行以下步骤：

我在 Chrome 上打开了一个网站：http://www.spritecow.com/
并检查了应用程序缓存：chrome://appcache-internals/
并且该网站已被缓存。
我关闭了 Chrome 并重新加载它。缓存仍然存在。这正是我想要的离线浏览功能。
现在这与本地存储有何不同？试图找到区别，但所有网站都是针对用途进行回答，即应用程序缓存用于模板缓存，而本地存储用于模板内的内容。
某些网站不喜欢应用程序缓存，因为对于单行更改，它会重新加载整个缓存。有些网站只使用本地存储。而有些则同时使用应用程序缓存(模板)和本地存储。

现在的问题是：

本地存储在客户端机器上存储。如果我关闭浏览器仍然可以访问，那么AppCache存储方式又有何不同。
由于清除缓存会清除应用程序缓存，因此我只想使用本地存储。
离线浏览应该遵循哪些最佳实践？我完全是新手，在这方面需要一点澄清。

编辑

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

- cosmoloc

可能是Is AppCache = Application Cache = Web Storage's LocalStorage?的重复问题。 - Paddy

你链接的问题已经很清楚地解释了它们之间的区别。你需要澄清其中的某些具体内容吗？ - Paddy

是的，对于本地存储，即使浏览器关闭，它也可以长时间存储数据。对于AppCache，它用于在浏览器中存储整个Web应用程序，以便即使客户端没有任何互联网连接，也可以使用它。但是为了设置离线浏览，我计划仅使用本地存储，而有些人建议使用AppCache来处理网站模板部分。 - cosmoloc

1

我认为它们都可以用于你的目的。主要区别在于如何使用它。LocalStorage 可以更加灵活，因为它是通过编程控制的，而 AppCache 使用静态清单文件来声明应该缓存什么和如何缓存。就缓存而言，使用 AppCache 比使用 LocalStorage 更容易。你只需要列出需要缓存的内容，还可以定义回退等内容。所有逻辑部分都留给浏览器处理。 - TwilightSun

2个回答

3

Appcache可以在完全离线且浏览器已关闭的情况下工作，然后您重新打开浏览器并输入URL时仍然离线 - 页面将加载！请查看此网站...在线加载一次，然后断开互联网连接并关闭浏览器...然后重新打开浏览器并尝试在仍然离线的情况下访问它。 localStorage需要首先连接才能加载所需的js代码以从中获取数据。

- iSpeakMachines

如果您已经加载了JS文件，浏览器将自动缓存它。因此，即使您关闭并重新打开浏览器，JS也将从缓存中加载。 - Jay Shah

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ylerjen · Accepted Answer

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

LocalStorage将存储数据而不是页面。因此，您可以将任何可以进行字符串化的JavaScript对象存储在localStorage中。

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

示例

想象一下一个你希望离线可用的网络日历（注意：为了这个例子，我们在这里使用静态页面，并使用javascript加载数据，也可以从动态页面实现相同的效果，但这个例子使用静态页）。

AppCache将存储html页面及其使用的资源（JavaScript脚本、css、图像）以呈现页面。由于您已经在清单文件中放置了所有要缓存的内容以备下次离线访问，因此页面已存储，您将能够在下次访问时离线显示页面。

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

如果您想让所有会议也能离线使用，您需要将它们存储在本地存储中（而不是在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);
}