如何使用HTML5离线存储功能

最新推荐文章于 2024-07-19 10:24:06 发布

前端爱好者。

最新推荐文章于 2024-07-19 10:24:06 发布

阅读量285

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=j0jabcbaa&title=%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8HTML5%E7%A6%BB%E7%BA%BF%E5%AD%98%E5%82%A8%E5%8A%9F%E8%83%BD

版权

前端专栏收录该内容

483 篇文章 4 订阅

订阅专栏

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

所以我们可以利用HTML5的离线存储功能开发出一些丰富的基于web的应用。
这一技术包含了两部分内容：1＼一个manifest缓存清单；2＼javascript接口
manifest缓存文件包含了一些需要缓存的资源清单
javascript接口提供了用于更新缓存文件的方法以及对缓存文件的操作
当我们准备开发基于HTML5离线存储的应用时，首先要确认我们的服务端是否支持对manifest文件的解析（目前服务端默认都不支持，相信HTML5发布后，服务端应该都会对manifest文件的支持），如果不支持，请在服务端mime.types文件中添加。
我们以mac os系统下apache为例，运行终端

cd /
cd etc/apache2
sudo vi mime.types
通过vi命令对mime.types文件做添加

添加完后，我们重启apache

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

接下来我们看看这个mainfest文件到底要放哪些东西？要怎么放？
我们创建一个以manifest为扩展名的文件，在这里我命名为cacheData.manifest,在这个文件中将指定一些文件的路径，比如HTML\CSS\JavaScript\Images。
这个文件中必须具备以下特点：
1＼第一行必须以CACHE MANIFEST开头
2＼紧接着是文件的路径或注释
3＼注释必须以＃开头
4＼必须声明一个白名单，这个白名单指定的文件将在用户连接因特网后访问，它必须在NETWORK:下一行
以上四点是一个manifest必须具备的。如果你需要，你还可以：
1＼在进入因特网后，增加一个缓存内容，这些文件的路径必须在CACHE:的下一行；
2＼增加备份，这些文件的路径必须在FALLBACK: 的下一行，它的格式是：

FALLBACK:
static/img/png/alipay-bank-icbc.png static/img/png/alipay-bank-cmb.png
第一个文件的路径和第二个文件的路径中间有一个空格，这个FALLBACK：的作用是：当第一个文件缓存不成功时，或无法找到时，它会缓存第二个文件。
下面是一个完整的manifest文件的内容

CACHE MANIFEST
#version 1.0
login.html
static/css/i.css
static/img/png/alipay-i-logo-big.png
static/img/png/alipay-i-icons.png
static/js/mui-min.js
NETWORK:
static/img/png/button-ok.png
CACHE:
static/img/png/login-slider-bg.png
FALLBACK:
static/img/png/alipay-bank-icbc.png static/img/png/alipay-bank-cmb.png
我们已经创建好了cacheData.manifest文件，接下来，我们需要在html文件中指定文档的manifest属性为cache.mnifest文件的路径。

<html manifest="cacheData.manifest">
这里有个值得注意的地方：有某些浏览器中仅仅添加这一属性，可能并不能很好的工作，所以我强烈建议前端工程师一定要用HTML5的文档声明方式创建HTML页面

<!DOCTYPE html>
如果你的操作都正确的话，这样就可以在用户的机器上缓存我们指定的文件了，但仅仅这样是不够的，我们的文件如果有更新怎么办？因为用户所访问的仍然是缓存在他自己机器上的文件，他无法看到我们更新后的内容或数据，我们需要在文件更新的同时，更新用户机器上的缓存文件，这就需要用到javascript为HTML5这一特性提供的接口。
在支持HTML5离线存储的浏览器中window对象有一个applicationcache属性，通过window.applicationcach我们可以获得一个DOMApplicationCache对象，这个对象来自DOMApplicationCache类，这个类有一系列的属性和方法，具体请参阅Safari HTML5 Applicationcache DOMApplicationCache开发文档
首先我们获取DOMApplicationCache对象

var cache = window.applicationcache;
接下来我们将触发cache对象的一些事件来检测我们的缓存是否成功

/*oncached事件表示：当更新已经处理完成，并且存储。
* 如果一切正常，这里cache的状态应该是4
*/
       cache.addEventListener('cached', function(){
            console.log('Cached,Status:' cache.status);
        }, false);

/*onchecking事件表示：当更新已经开始进行，但资源还没有开始下载，意思就是说：刚刚获取到最新的资源。
* 如果一切正常，这里cache的状态应该是2
*/
        cache.addEventListener('checking', function(){
            console.log('Checking,Status:' cache.status);
        }, false);

/*ondownloading事件表示：开始下载最新的资源。
* 如果一切正常，这里cache的状态应该是3
*/
        cache.addEventListener('downloading', function(){
            console.log('Downloading,Status:' cache.status);
        }, false);

/*onerror事件表示：有错误发生，manifest文件找不到或服务端有错误发错或资源找不到都会触发onerror事件。
* 如果一切正常，这里cache的状态应该是0
*/
        cache.addEventListener('error', function(){
            console.log('Error,Status:' cache.status);
        }, false);

/*onnoupdate事件表示：更新已经处理完成，但是manifest文件还未改变，处理闲置状态。
* 如果一切正常，这里cache的状态应该是1
*/
        cache.addEventListener('noupdate', function(){
            console.log('Noupdate,Status:' cache.status);
        }, false);

/*onupdateready事件表示：更新已经处理完成，新的缓存可以使用。
* 如果一切正常，这里cache的状态应该是4
*/
        cache.addEventListener('updateready', function(){
            console.log('Updateready,Status:' cache.status);
            cache.swapCache();
        }, false);
通过以上代码我们可以发现，当DOMApplicationCache对象触发了updateready事件时，才真正的更新了缓存文件。

如果在开发过程当中就开始对离线存储功能做单元测试，那么你每一次修改文件都必须要更新manifest文件中的内容，即使更新了一个注释，整个manifest 文件也会更新，DOMApplicationCache对象也会触发上述的一系列事件，直接新的缓存文件可用为止。

所以通常情况下，我们都会去更新manifest文件中的版本号用以触发onupdateready事件。