time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > HTML5离线存储介绍

HTML5离线存储介绍

时间:2012-12-02 22:58 点击:4598次 字体:[ ]




本文主要内容归纳如下:

一、离线存储的作用;二、如何实现离线存储;三、applicationCache对象,及属性、事件、接口

四、访问缓存应用,相应触发事件,及其对应状态;五、如何更新离线缓存

六、demo演示:update后是否调用swapCache的区别;七、写在后面

 

一、离线存储的作用

1、用户可离线访问你的应用,这对于无法随时保持联网状态的移动终端用户来说尤其重要

2、用户访问本地的缓存文件,通常意味着更快的访问速度

3、仅仅加载被修改过的资源,避免同一资源对服务器多次的请求,大大降低了对服务器的访问压力

 

二、如何实现离线存储

1、在html标签里通过manifest属性引用一个cache.manifest文件,该文件里声明了浏览器需缓存的所有资源文件,如下所示:

  1. <!DOCTYPE html> 
  2. <html lang='cn' manifest='cache.manifest'> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>离线缓存示例页面</title> 
  6. <!-- CSS文件引用 --> 
  7. </head> 
  8.  
  9. <body> 
  10. <!-- 各种标签 --> 
  11. </body> 
  12.  
  13. <!-- 各种脚本文件  --> 
  14. </html> 

2、关于cache.manifest的定义

  1. CACHE MANIFEST  
  2. # 注释:需要缓存的文件,无论在线与否,均从缓存里读取  
  3. chched.js  
  4. cached.css  
  5.  
  6. # 注释:不缓存的文件,无论缓存中存在与否,均从新获取  
  7. NETWORK:  
  8. uncached.js  
  9. uncached.css  
  10.  
  11. # 注释:获取不到资源时的备选路径,如index.html访问失败,则返回404页面  
  12. FALLBACK:  
  13. index.html 404.html 

3、几个需要关注的细节

  • cache.manifest 文件的MIME类型是text/cache-manifest,至于如何让web服务器返回.manifest文件时添加 Content-Type: text/cache-manifest,不同服务器配置细节不同,此处不展开
  • cache.manifest写法以CACHE MANIFEST开头,文件编码格式必须是utf-8
  • 引用cache.manifest的html文档会被默认包含进缓存清单

4、归纳起来,步骤如下:

  • 配置服务器支持 cache.manifest 的Content-type: manifest
  • 编写 cache.manifest 文件
  • html页面引用cache.manifest文件

 

三、applicationCache对象,及属性、事件、接口

浏览器通过window.applicationCache对象来及其相应属性、接口、事件供用户构建离线应用,详细可见 applicationCache

 

  1. //当前文档对应的applicationCache对象  
  2. window.applicationCache  
  3.  
  4. //当前缓存所处的状态,为0~5的整数值,分别对应一个状态,并分别对应一个常量  
  5. window.applicationCache.status  
  6.  
  7. window.applicationCache.UNCACHED === 0    //未缓存,比如一个页面没有制定缓存清单,其状态就是UNCACHED  
  8. window.applicationCache.IDLE === 1 //空闲,缓存清单指定的文件已经全部被页面缓存,此时状态就是IDLE  
  9. window.applicationCache.CHECKING === 2 //页面正在检查当前离线缓存是否需要更新  
  10. window.applicationCache.DOWNLOADING === 3 //页面正在下载需要更新的缓存文件  
  11. window.applicationCache.UPDATEREADY === 4  //页面缓存更新完毕  
  12. window.applicationCache.OBSOLETE === 5  //缓存过期,比如页面检查缓存是否过期时,发现服务器上的.manifest文件被删掉了  
  13.  
  14. //常用API,在后面会稍详细介绍  
  15. window.applicationCache.update()  //update方法调用时,页面会主动与服务器通信,检查页面当前的缓存是否为最新的,如不是,则下载更新后的资源  
  16. window.applicationCache.swapCache()  //updateready后,更新到最新的应用缓存 



本文地址 : http://www.fengfly.com/plus/view-210660-1.html
标签: HTML5
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: