现在的位置: 首页 > WEB前端 > 正文
初探–HTML5离线存储
2014年01月12日 WEB前端 ⁄ 共 3977字 暂无评论 ⁄ 被围观 2,122 views+
        随着HTML5的出现,一些新的技术也随即出现在Web开发人员面前,今天就来看看HTML5其中的一个新技术-- - - -离线存储.
现在网上关于这方面的资料还是有的,通过阅读一些资料和相关书籍,特将做的一些例子总结出来,方便在后面的开发过程中进行查阅.
(1)    HTML  代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" manifest="test.manifest">      //(1)   这部分是一定要加的
<head>
    <title>HTML5利用ApplicationCache实现离线存储</title>
    <link href="http://handyxuefeng.blog.163.com/blog/../CSS/div.css" rel="stylesheet" type="text/css" />
    <script src="http://handyxuefeng.blog.163.com/blog/../Testjs/add.js" type="text/javascript"></script>
</head>
<body>
    <div class="d" id="testdiv">
    </div>
</body>
</html>

<script>
    /*
        applicationCache的更新过程所触发的事件
       ,它们是:onchecking,onerror,onnoupdate,ondownloading,onprogress,onupdateready,oncached和onobsolete。
    */
    var Win = window;
    var AppCache = Win.applicationCache;
    var dom = document;
    AppCache.onchecking = function(e) {
        dom.title = ("Checking for application update");
        dom.getElementById("testdiv").innerHTML += "<font color='red'>Checking for application update</font>,applicationCache.status=" + AppCache.status + "<br>";

    };
    AppCache.onerror = function(e) {
        dom.title = ("Application cache error");
        dom.getElementById("testdiv").innerHTML += "<font color='red'>Application cache error</font>,applicationCache.status=" + AppCache.status + "<br>";
    };
    AppCache.onnoupdate = function(e) {
        dom.title = ("No application update found");
        dom.getElementById("testdiv").innerHTML += "<font color='red'>No application update found</font>,applicationCache.status=" + AppCache.status + "<br>";
    };
    AppCache.ondownloading = function(e) {
        dom.title = ("Downloading application update");
        dom.getElementById("testdiv").innerHTML += "<font color='red'>Downloading application update</font>,window.applicationCache.status=" + AppCache.status + "<br>";
    };
    AppCache.onprogress = function(e) {
        dom.title = "Application is Progress!";
        dom.getElementById("testdiv").innerHTML += "<font color='red'>Application is Progress</font>,applicationCache.status=" + AppCache.status + "<br>";
    };
    AppCache.onupdateready = function(e) {
        dom.title = ("Application update ready");
        dom.getElementById("testdiv").innerHTML += "<font color='red'>Application update ready</font>,applicationCache.status=" + AppCache.status + "<br>";
    };
    AppCache.oncached = function(e) {
        dom.title = ("Application cached");
        dom.getElementById("testdiv").innerHTML += "<font color='red'>Application cached</font>,applicationCache.status=" + AppCache.status + "<br>";
    };
    AppCache.onobsolete = function(e) {
        dom.title = ("Application obsolete");
        dom.getElementById("testdiv").innerHTML += "<font color='red'>Application obsolete</font>,applicationCache.status=" + AppCache.status + "<br>";
    };
    Win.addEventListener("online", function(e) {
        dom.title = ("Online");
    }, true);
    Win.addEventListener("offline", function(e) {
        dom.title = ("Offline");
    }, true);
</script>
(2) 创建记录资源文件 test.manifest(这个文件在html的加载方式见上面红色部分)
     test.manifest文件是一个清单文件,列出applicationCache要离线存储的相关文件,下面就列出本例中要离线存储的文件,文件内容如下: CACHE MANIFEST
JavaScript 指定离线存储的js文件
../Testjs/add.js  
../Testjs/sub.js
stylesheets  指定离线存储的css文件
../CSS/div.css
../CSS/HTML5.css
# images       指定离线存储的图片文件
../Image/c.jpg
../Image/d.jpg
../Image/e.jpg
# 以下资源必须在线访问
NETWORK:
HTML5_offline_ApplicationCahce.htm
# 如果another.htm无法访问,则用404.html代替
FALLBACK:
/another.htm /HTML5/404.htm
(3) test.manifest文件配置好后,接下来的工作就是配置服务器了,不同的服务器对.manifest后缀名的文件配置方法不一样,这里列出IIS设置支持.manifest文件类型的截图.
初探--HTML5离线存储 - handyxuefeng - handyxuefeng的博客

 (2) 点击HTTP头选项卡,出现下图

初探--HTML5离线存储 - handyxuefeng - handyxuefeng的博客

 
(3) 点击 MIME 类型按钮 弹出 下图
     

初探--HTML5离线存储 - handyxuefeng - handyxuefeng的博客

 (4)点击新建按钮,在弹出的对话框中输入如下内容
    

初探--HTML5离线存储 - handyxuefeng - handyxuefeng的博客


(5)  通过以上步骤完成在服务器端配置支持manifest文件的方法 ,下面就是在firefox,chrome较高的版本中进行测试,以在chrome为列,方便看出离线存储文件的过程.运行图如下

初探--HTML5离线存储 - handyxuefeng - handyxuefeng的博客

 点击 Console按钮看以看出在test.manifest清单文件中指定要离线存储的文件都下载,通过下图更方便看出资源的下载过程,点击调试器上的Resources按钮,效果图如下:

初探--HTML5离线存储 - handyxuefeng - handyxuefeng的博客

 为了验证这些文件是否被浏览器缓存,在浏览器中输入about:cache可以查看结果,在chrome中没有列出缓存文件所在本地的路径,只是列出了缓存了那些文件,   效果图如下:

初探--HTML5离线存储 - handyxuefeng - handyxuefeng的博客
但用firefox进行测试时,会列出缓存的文件在本地的具体位置,效果图如下:
初探--HTML5离线存储 - handyxuefeng - handyxuefeng的博客

    理解HTML5的离线存储,关键是理解ApplicatioinCache的各个事件的运行顺序, 

    /*
        applicationCache的更新过程所触发的事件
       ,它们是:onchecking,onerror,onnoupdate,ondownloading,onprogress,onupdateready,oncached和onobsolete。
    */
  对每个事件的触发都可以根据相关的需求做一些处理,ApplicationCache的高级运用有待进一步学习.

给我留言

您必须 [ 登录 ] 才能发表留言!