谈谈如何实现HTML5的离线存储

关于HTML5离线存储的原理和实现，每个人都知道Web应用程序是通过浏览器访问的，因此该应用程序不能脱机使用。 Web应用程序中的某些资源不会经常更改，并且您不需要每次都向服务器发送请求。此时形成的离线缓存特别突出。列出需要在清单配置文件中脱机缓存的文件。这样，您也可以在离线时使用该应用。

离线存储清单通常由三部分:

组成

1. CACHE:表示需要离线存储的资源列表。由于包含清单文件的页面将自动脱机存储，因此无需列出页面本身。

2.NETWORK:表示下面列出的资源只有在线时才能访问，它们不会离线存储，因此不能脱机使用。尚学堂？百名战争程序员陈指出，如果CACHE和NETWORK中存在相同的资源，那么该资源仍将离线存储，这意味着CACHE具有更高的优先级。

3.FALLBACK:表示如果第一个资源无法访问，则第二个资源用于替换他。例如，上面的文件表明如果根目录中的任何资源无法访问，则转到offline.html。使用HTML5，您可以通过创建缓存清单文件轻松创建Web应用程序的脱机版本。

HTML5引入了应用程序缓存，这意味着在没有网络时可以缓存和访问Web应用程序。

应用程序缓存为应用程序带来了三个优势：

离线浏览 - 用户可以在离线时使用它们。

速度 - 已缓存的资源加载速度更快。

减少服务器负载 - 浏览器只会从服务器下载更改的资源。

原理和环境

如上所述，HTML5的离线存储基于新创建的.appcache文件。资源通过此文件上的解析列表进行脱机存储，这些资源像cookie一样存储。然后，当网络脱机时，浏览器将通过离线存储的数据显示页面。就像cookie一样，html5的离线存储也需要服务器环境。这是一个小工具——简单的iis服务器，把它放在项目目录中，双击模拟服务器环境。

解析清单

在开始之前，您需要了解清单（即.appcache文件），如何编写上面的解析列表。清单文件是一个简单的文本文件，告诉浏览器缓存的内容（以及未缓存的内容）。

清单文件可分为三个部分：

CACHE MANIFEST - 首次下载后，将缓存此标题下列出的文件;

网络 - 此标题下列出的文件需要连接到服务器，不会被缓存;

FALLBACK - 此标题下列出的文件指定页面无法访问时的后备页面（例如404页面）;

在在线的情况下，用户代理在每次访问页面时读取清单。如果发现更改，则会重新加载列表中的所有资源。

第一行，CACHE MANIFEST，是必需的：

1 CACHE MANIFEST/theme.css /logo.gif/main.js

上面的清单文件列出了三个资源：CSS文件，GIF图像和JavaScript文件。加载清单文件后，浏览器将从网站的根目录下载三个文件。无论用户何时从Internet断开连接，这些资源都可用。

网络

白名单，使用通配符“*”。它将进入白名单的打开状态。在此状态下，默认情况下，未出现在相关缓存区域中的所有URL都使用与HTTP相关的缓存头策略。

以下NETWORK部分声明文件“login.asp”永远不会被缓存，并且不能脱机使用：

NETWORK: login.asp

您可以使用*来指示所有其他资源/文件都需要Internet连接：

网络: *

FALLBACK

下面的FALLBACK部分指出，如果无法建立Internet连接，请将/html5 /目录中的所有文件替换为“offline.html”：

ALLBACK：/html5//404.html

注意：第一个URI是资源，第二个URI是替代。

对于浏览器，清单的加载时间晚于其他资源。这导致检查清单进程滞后。发现明显变化。所有浏览器实现都遵循此方法以静默方式更新资源。第二个光伏，适用于更新。我们的产品已经更新，但用户必须第二次进入，因此用户体验太糟糕了。有什么办法可以解决吗？幸运的是，html5为相关API提供了API。

站点的离线存储容量限制为5M。如果无法正常下载清单文件或内部列出的文件，则整个更新过程将被视为失败。浏览器继续使用旧缓存。引用清单的html必须与清单文件相同。源，在同一个域下，清单中使用的相对路径，相对引用是清单文件，CACHE MANIFEST字符串应该在第一行，而且必不可少，系统会自动缓存引用该文件的HTML文件清单文件。清单文件中的CACHE与NETWORK和FALLBACK的位置顺序无关。如果它是隐式声明，则需要位于顶部。

FALLBACK中的资源必须与清单文件相同。缓存资源时，浏览器直接请求绝对路径并访问缓存中的资源。站点中的其他页面，即使未设置清单属性，如果请求的资源位于缓存中，也会从缓存中访问该资源。清单文件更改时，资源请求本身会触发更新。

汇海 Technology是领先的综合性软件和信息服务公司，为客户提供从软件开发到营销和推广的互联网解决方案，旨在成为业界领先的全链信息技术服务提供商。公司与中国移动，平安银行，南方数字，北大青鸟，西门子等行业巨头进行全面深入的战略合作，深入涉足汽车，金融，电子商务，农业等重点行业。教育等，手机软件开发

不断开拓全国市场，为客户提供全链，优质，高效，综合优势和行业特色的技术服务。武汉哪家公司做网站？武汉哪家公司做网站？哪家公司是网站？武汉着名的网站建设公司？武汉的武汉网站生产企业有哪些？武汉网站外包？武汉有哪些可靠的软件开发公司？武汉有哪些更好的app开发，微信开发和系统开发公司？如果您有这样的需求，请联系汇海技术，财富热线：027-86633307，我们将以专业的服务态度做到每一个需要，这是我们的目标，使每一个需要到极致！