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

Posted 2023-03-05

【中文标题】HTML5 本地存储 VS 应用缓存离线网站浏览

【英文标题】：HTML5 Local Storage VS App Cache Offline Website Browsing

【发布时间】：2016-01-02 00:32:46

【问题描述】：

浏览了多篇文章后， 我仍然不清楚本地存储和应用缓存清单之间的区别。

也称为：Is AppCache = Application Cache = Web Storage's LocalStorage? (SO 10986026)、Application Cache is a Douchebag (A List Apart)

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

后续步骤：

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

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

现在这与本地存储有何不同？试图找出不同之处，但所有站点都有目的地回答，即用于模板缓存的 AppCache 和用于模板内内容的本地存储。

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

现在的疑问是：

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

因为清除缓存会清除 AppCache，所以我只选择本地存储。

离线浏览的最佳实践是什么？我对此完全陌生，需要对此有所了解

---

编辑

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

【问题讨论】：

Is AppCache = Application Cache = Web Storage's LocalStorage?的可能重复

您链接到的问题非常清楚地解释了为什么这些不同。您是否需要澄清一些具体的问题？

是的，对于本地存储，即使浏览器关闭，它也会长时间存储数据。对于 AppCache，它用于将整个 Web 应用程序存储在浏览器中，即使客户端根本没有互联网连接也可以使用。但是为了设置离线浏览，我打算只使用本地存储，而有些人建议 AppCache 是网站模板部分的方式

我认为它们都可以用于您的目的。区别主要在于您如何使用它。 LocalStorage 可以更加灵活，因为它是通过编程方式控制的，而 AppCache 使用静态清单文件来声明应该如何缓存以及缓存什么。使用 AppCache 比使用 LocalStorage 只考虑缓存更容易。您需要做的就是列出需要缓存的内容，并且您可以定义诸如回退之类的内容。所有逻辑部分都留给浏览器。

【参考方案1】：

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);

【讨论】：

感谢 Miam，我对这个概念的担忧在于，仅清除缓存将清除 AppCache，从而清除模板和资源文件，而本地存储仍将保存内容。我正在寻找两者之间是否有更好的同步做法

Mmmh... 仅清除缓存不会清除 LocalStorage (LS)，但清除所有缓存数据（cookie、历史记录等）会。所以这取决于。但无论如何，您可以使用版本号作为 JS 变量（通过手动解析清单或简单地设置 JS 常量）并将其用作 localStorage 值来检测两者之间的差异。或者对于 Chrome >=22，您可以使用此 (developer.chrome.com/extensions/runtime#method-getManifest) 访问清单版本。但不要忘记对不支持此方法的浏览器进行后备。

【参考方案2】：

Appcache 甚至可以在您完全离线并且您的浏览器关闭，然后您打开浏览器并在仍然离线时输入 URL 时工作——页面加载！检查此site here ...在线时加载一次，然后断开与 Internet 的连接并关闭浏览器...然后重新打开浏览器并尝试在仍处于离线状态时访问它。

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

【讨论】：

如果你已经加载过一次js文件，浏览器会自动缓存。所以即使你关闭并重新打开浏览器，js也会从缓存中加载。