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

HTML5 Local Storage VS App Cache Offline Website Browsing

本文关键字：缓存 离线 网站 浏览 应用 VS 存储 HTML5      更新时间：2023-09-26

通读多篇文章后，我仍然不清楚本地存储和应用程序缓存清单之间的区别。

也提到:是AppCache =应用缓存= Web存储的LocalStorage?(SO 10986026)，应用程序缓存是一个混蛋(一个列表之外)

我的目标是建立一个网站，有特定的页面可以根据用户的需求离线给用户。

后续步骤:

  • 我在Chrome上打开了一个网站:http://www.spritecow.com/
    检查AppCache: chrome://AppCache -internals/

  • 我关闭Chrome并重新加载它。宝藏还在那里。正是我需要的离线浏览

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

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

现在的疑问是:

  • 客户端机器上的本地存储。如果我仍然可以访问AppCache存储是如何不同的，即使浏览器关闭。

  • 由于清除缓存会清除AppCache，所以我只会选择本地存储

  • 离线浏览的最佳实践是什么?我对此完全陌生，需要对相同的

    • 进行一点澄清。

编辑

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

AppCache使用manifest文件来定义应用程序使用的文件应该被存储(您可以缓存文件和资源，如HTML页面，JS脚本，CSS样式，图像，…)

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

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

示例

想象一个你想要离线使用的web日历(注意:对于这个例子，我们在这里使用一个静态页面，数据是用javascript加载的)。动态页面也可以这样做，但本例使用的是静态页面。

appache将存储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);
}

Appcache甚至可以工作，如果你是完全脱机，你的浏览器是关闭的，然后你打开你的浏览器，输入URL，而仍然脱机-页面加载!查看一下这个网站，在线时加载一次，然后断开网络连接并关闭浏览器，然后重新打开浏览器并尝试在离线时访问它。

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

相关文章：