如何使用HTML5离线存储功能?

我们知道在最新的主流的浏览器中都已添加了对HTML5的offlinestorage功能的支持,HTML5离线存储功能非常强大,它的作用是:在用户没有与因特网连接时,照样可以访问站点或应用,在用户与因特网连接时,自动更新缓存数据。

所以我们可以利用HTML5的离线存储功能开发出一些丰富的基于web的应用。这一技术包含了两部分内容:1\一个manifest缓存清单;2\javascript接口manifest缓存文件包含了一些需要缓存的资源清单

javascript接口提供了用于更新缓存文件的方法以及对缓存文件的操作

当我们准备开发基于HTML5离线存储的应用时,首先要确认我们的服务端是否支持对manifest文件的解析(目前服务端默认都不支持,相信HTML5发布后,服务端应该都会对manifest文件的支持),如果不支持,请在服务端mime.types文件中添加。我们以macos系统下apache为例,运行终端

cd/

cdetc/apache2

sudovimime.types

通过vi命令对mime.types文件做添加

添加完后,我们重启apache

sudoapachectlrestart

OK,这样我们的本地开发环境就支持manifest文件了。为什么要求服务器一定要支持manifest文件?因为我们做离线存储必须要有一个manifest文件来存储我们需要缓存在用户机器上的资源路径,且这个manifest文件的路径将在html的文件中使用,稍后我们详细讲解。

接下来我们看看这个mainfest文件到底要放哪些东西?要怎么放?

我们创建一个以manifest为扩展名的文件,在这里我命名为cacheData.manifest,在这个文件中将指定一些文件的路径,比如HTML\CSS\JavaScript\Images。

这个文件中必须具备以下特点:

1\第一行必须以CACHEMANIFEST开头

2\紧接着是文件的路径或注释

3\注释必须以#开头

4\必须声明一个白名单,这个白名单指定的文件将在用户连接因特网后访问,它必须在NETWORK:下一行

以上四点是一个manifest必须具备的。如果你需要,你还可以:

1\在进入因特网后,增加一个缓存内容,这些文件的路径必须在CACHE:的下一行;2\增加备份,这些文件的路径必须在FALLBACK:的下一行,它的格式是:FALLBACK:

static/img/png/alipay-bank-icbc.pngstatic/img/png/alipay-bank-cmb.png

第一个文件的路径和第二个文件的路径中间有一个空格,这个FALLBACK:的作用是:当