导航：首页 > 开发技术 >

HTML5如何实现离线存储功能

发表于：2026-11-02 作者：千家信息网编辑

千家信息网最后更新 2026年11月02日，这篇文章给大家分享的是有关HTML5如何实现离线存储功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。HTML5 离线功能介绍HTML5 是目前正在讨论的新一代 HTML

千家信息网最后更新 2026年11月02日HTML5如何实现离线存储功能

这篇文章给大家分享的是有关HTML5如何实现离线存储功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

HTML5 离线功能介绍

HTML5 是目前正在讨论的新一代 HTML 标准，它代表了现在 Web 领域的最新发展方向。在 HTML5 标准中，加入了新的多样的内容描述标签，直接支持表单验证、视频音频标签、网页元素的拖拽、离线存储和工作线程等功能。其中一个新特性就是对离线应用开发的支持。

在开发支持离线的 Web 应用程序时，开发者通常需要使用以下三个方面的功能：

1. 离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，把这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5 中，通过 cache manifest 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。

2. 在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在 HTML5 中，提供了两种检测当前网络是否在线的方式。

3. 本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML5 提供了 DOM Storage 和 Web SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式，而后者提供了基本的关系数据库存储功能。

尽管 HTML5 还处于草稿状态，但是各大主流浏览器都已经实现了其中的很多功能。Chrome、Firefox、Safari 和 Opera 的最新版本都对 HTML5 离线功能提供了完整的支持。IE8 也支持了其中的在线状态检测和 DOM Storage 功能。下面将具体介绍 HTML5 离线功能中的离线资源缓存、在线状态检测、DOM Storage 和 Web SQL Database，最后通过一个简单的 Web 程序说明使用 HTML5 开发离线应用的方法。

回页首

离线资源缓存

为了能够让用户在离线状态下继续访问 Web 应用，开发者需要提供一个 cache manifest 文件。这个文件中列出了所有需要在离线状态下使用的资源，浏览器会把这些资源缓存到本地。本节先通过一个例子展示 cache manifest 文件的用途，然后详细描述其书写方法，最后说明缓存的更新方式。

cache manifest 示例

我们通过 W3C 提供的示例来说明。Clock Web 应用由三个文件"clock.html"、"clock.css"和"clock.js"组成。

清单 1. Clock 应用代码

Clock

The time is:

/* clock.css */

output { font: 2em sans-serif; }

/* clock.js */

setTimeout(function () {

document.getElementById('clock').value = new Date();

}, 1000);

当用户在离线状态下访问"clock.html"时，页面将无法展现。为了支持离线访问，开发者必须添加 cache manifest 文件，指明需要缓存的资源。这个例子中的 cache manifest 文件为"clock.manifest"，它声明了 3 个需要缓存的资源文件"clock.html"、"clock.css"和"clock.js"。

清单 2. clock.manifest 代码

CACHE MANIFEST

clock.html

clock.css

clock.js

添加了 cache manifest 文件后，还需要修改"clock.html"，把标签的 manifest 属性设置为"clock.manifest"。修改后的"clock.html"代码如下。

清单 3. 设置 manifest 后的 clock.html 代码

Clock

The time is:

修改后，当用户在线访问"clock.html"时，浏览器会缓存"clock.html"、"clock.css"和"clock.js"文件；而当用户离线访问时，这个 Web 应用也可以正常使用了。

cache manifest 格式

下面说明书写 cache manifest 文件需要遵循的格式。

1. 首行必须是 CACHE MANIFEST。

2. 其后，每一行列出一个需要缓存的资源文件名。

3. 可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存，在使用时将直接在线访问。声明白名单使用 NETWORK：标识符。

4. 如果在白名单后还要补充需要缓存的资源，可以使用 CACHE：标识符。

5. 如果要声明某 URI 不能访问时的替补 URI，可以使用 FALLBACK：标识符。其后的每一行包含两个 URI，当第一个 URI 不可访问时，浏览器将尝试使用第二个 URI。

6. 注释要另起一行，以 # 号开头。

清单 4 的代码中给出了 cache manifest 中各类标识符的使用示例。

清单 4. cache manifest 示例代码

CACHE MANIFEST

# 上一行是必须书写的。

images/sound-icon.png

images/background.png

NETWORK:

comm.cgi

# 下面是另一些需要缓存的资源，在这个示例中只有一个 css 文件。

CACHE:

style/default.css

FALLBACK:

/files/projects /projects

更新缓存

应用程序可以等待浏览器自动更新缓存，也可以使用 Javascript 接口手动触发更新。

1. 自动更新

浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。

2. 手动更新

开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。示范代码如下。

清单 5 手动更新缓存

if (window.applicationCache.status == window.applicationCache.UPDATEREADY)

｛

window.applicationCache.update();

｝

回页首

在线状态检测

如果 Web 应用程序仅仅是一些静态页面的组合，那么通过 cache manifest 缓存资源文件以后，就可以支持离线访问了。但是随着互联网的发展，特别是 Web2.0 概念流行以来，用户的提交的数据渐渐成为互联网的主流。那么在开发支持离线的 Web 应用时，就不能仅仅满足于静态页面的展现，还必需考虑如何让用户在离线状态下也可以操作数据。离线状态时，把数据存储在本地；在线以后，再把数据同步到服务器上。为了做到这一点，开发者首先必须知道浏览器是否在线。HTML5 提供了两种检测是否在线的方式：navigator.online 和 online/offline 事件。

1. navigator.onLine

navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果为 false, 表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。开发者可以通过读取它的值获取网络状态。

2. online/offline 事件

当开发离线应用时，通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着 document.body、document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline 事件来获悉网络状态。

回页首

DOM Storage

在开发支持离线功能的 Web 应用时，开发者需要在本地存储数据。当前浏览器支持的 cookie 虽然也可以用来存储数据，但是 cookie 长度非常小（通常几 k），而且功能有限。因此，HTML5 中新引入了 DOM Storage 机制，用于存储 key/value 对，它的设计目标是提供大规模、安全且易用的存储功能。

DOM Storage 分类

DOM Storage 分为两类：sessionStorage 和 localStorage。除了以下区别外，这两类存储对象的功能是完全一致的。

1. sessionStorage 用于存储与当前浏览器窗口关联的数据。窗口关闭后，sessionStorage 中存储的数据将无法使用。

2. localStorage 用于长期存储数据。窗口关闭后，localStorage 中的数据仍然可以被访问。所有浏览器窗口可以共享 localStorage 的数据。

DOM Storage 接口

每一个 Storage 对象都可以存储一系列 key/value 对，Storage 接口定义为：

interface Storage {

readonly attribute unsigned long length;

getter DOMString key(in unsigned long index);

getter any getItem(in DOMString key);

setter creator void setItem(in DOMString key, in any data);

deleter void removeItem(in DOMString key);