资源描述：
《基于html5离线存储技术》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、基于HTML5离线存储技术摘要：HTML5是W3C的新标准，不仅提升了Web页面的性能，也有很多的API接口，开发人员使用这些接口，可以很容易地创建更丰富的Web程序。利用HTML5离线存储技术，使用DOM存储和WebSQLDatabase存储机制可以开发离线的Web应用程序。关键词：Web；HTML5；离线；DOMStorage中图分类号：TP393.09文献标识码：A文章编号：1008-4738(2013)02-0103-040引言随着HTML5[1]技术发展迅速，在HTML5平台上，视频、音频、图像、动画以及同电脑的交互都被标准化。HTML功能越来越
2、丰富，支持图片上传拖拽、支持Localstorage＞支持WebSQLDatabase、支持文件存储Api等等。致力于将Web带入一个更为成熟的应用平台，本文介绍HTML5的离线缓存[2]Web应用的功能。离线存储的三大核心功能作用：离线资源缓存需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，把这些文件缓存到本地。此后，当用户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5中，通过Cachemanifest文件指明需要缓存的资源，并支持自动和手动两种缓存[3]更新方式。在线状态检测：开发者需要知道
3、浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在HTML5中，提供了两种检测当前网络是否在线的方式。本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML5提供了DOMStorage和WebSQLDatabase两种存储机制[4][5]o前者提供了易用的key/value对存储方式,而后者提供了基本的关系数据库存储功能。1离线存储的实现(1)在html标签里通过manifest属性引用一个cache,manifest文件，该文件里声明了浏览器需缓存的所有资源文件，如下所示：离线缓存示例页
4、面(2)关于cache,manifest的定义CACHEMANIFEST#注释：需要缓存的文件，无论在线与否，均从缓存里读取chched.jscached.css#注释：不缓存的文件，无论缓存中存在与否，均重新获取NETWORK:uncached.jsuncached.css#注释：获取不到资源时的备选路径，如index,html访问失败，则返回404页面FALLBACK：index.html404.html几个需要关注的细节cache,manifest文件的MIME类型是text/cache-manifest,至于如何让web服务器返回.manifest
5、文件时添加Content-Type:text/cache-manifest,不同服务器配置细节不同，此处不展开。cache,manifest写法以CACHEMANIFEST开头，文件编码格式必须是utf-8。引用cache,manifest的html文档会被默认包含进缓存清单。归纳起来，步骤如下：配置服务器支持cache,manifest的Content-type：manifest编写cache,manifest文件html页面引用cache,manifest文件2ApplicationCache对象，及属性、事件、接口浏览器通过window,applic
6、ationCache对象来及其相应属性、接口、事件供用户构建离线应用，详细可见applicationCache//当前文档对应的app1icationCache对象window.applicationCache//当前缓存所处的状态，为0〜5的整数值，分别对应一个状态，并分别对应一个常量window.app1icationCache.statuswindow,applicationCache.UNCACHED===0//未缓存，比如一个页面没有制定缓存清单，其状态就是UNCACHED1//空闲，缓存window.applicationCache.IDLE二
7、二二清单指定的文件已经全部被页面缓存，此时状态就是IDLEwindow.appliedtionCache.CHECKING===2//页面正在检查当前离线缓存是否需要更新window,applicationCache.DOWNLOADING二二二3//页面正在下载需要更新的缓存文件window,applicationCache.UPDATEREADY===4//页面缓存更新完毕window,applicationCache.OBSOLETE===5//缓存过期，比如页面检查缓存是否过期时，发现服务器上的.manifest文件被删掉了//常用API,在后面会
8、稍详细介绍window.appliestionCache.upda
