基于HTML5的Web离线应用研究与探讨

刘耀钦

(郧阳师范高等专科学校 计算机科学系，湖北 十堰 442000)



基于HTML5的Web离线应用研究与探讨

刘耀钦

(郧阳师范高等专科学校 计算机科学系，湖北 十堰 442000)

摘要：HTML5是一种构建Web内容的语言描述方式，它赋予了网页更好的意义和结构.随着基于HTML的Web应用程序的大规模应用，开发人员经常会遇到以离线为背景的Web数据存储的问题.HTML5提供了Web Storage和Web DataBase两种离线存储机制，分别用于存储key/value和复杂交互式的数据，与Cookie技术相比有较大的存储容量和较高的存取效率，有效解决了离线数据的存储与服务器同步的问题.

关键词：HTML5；离线存储；资源缓存；manifest；WebSQL

Web离线存储是一种基于互联网媒体的数据存储，它有别于传统浏览器端的HTTP Cookies[1]存储机制，不同浏览器对Web数据存储的支持力度也各不相同.HTML5的Web离线应用机制有效解决了离线时Web应用程序的完整访问和数据同步到服务器的问题，将用户浏览过的页面和输入的数据存储于客户端，当Web应用程序离线时便从客户端获取这些数据并进行相应组合呈现给用户.

HTML5是构建Web内容的一种语言描述方式[2]，它提供了Web Storage和Web DataBase两种本地存储方案，其中Web Storage用于存储key/value对形式的数据，是一种大规模、安全易用的存储机制，分为sessionStorage和localStorage两类[3]；Web DataBase以关系数据库为基础，可以实现较为复杂的交互式Web数据存储.一个完整的Web离线应用程序需要有离线资源缓存、在线状态检测和本地数据存储3部分的支持.

图1　缓存文件结构Fig.1　Cache file structure

1离线资源缓存

为了使业务逻辑能够离线运行[4]，需要事先指定应用程序在离线工作时所需的资源文件，当离线访问时，浏览器会自动加载这些被缓存过的资源文件.HTML5通过应用缓存(Application Cache)接口指定cache manifest[5]为存储应用程序需要被离线缓存的资源列表文件，当首次访问该站点时，浏览器会将资源列表映射的文件存储在客户端缓存，直至资源列表文件本身被更新时才会重新缓存指定的资源文件.实际应用时，该文件被命名为扩展名为manifest或appcache的文件，一个完整的缓存文件分为cache manifest标识，cache，network和fallback共4个部分，其文件结构如图1所示.

图1中的第1部分指缓存文件标识，是整个缓存文件的必要部分；第2部分表示需要缓存的资源文件列表，当站点被成功访问一次后，列表中的文件就会被缓存于客户端，以后访问该站点时，均会从客户端读取这些已经被缓存过的资源文件，直到缓存文件本身被更新或浏览器清空了缓存；第3部分用来指定必须在线才能访问的文件，比如一些需要在服务器端处理的文件，如果这样的文件很多，可以用白名单通配符“*”来表示，除了第2部分列表文件外的其他所有文件均需要在线访问；第4部分用来指定当没有找到缓存文件时的替代方案，用“URL1 URL2”形式表示，当在浏览器缓存中没有找到URL1指定的资源时，将用URL2指定的资源替代输出.实际使用时需要得到两方面的支持，一是需要在服务器端添加缓存支持，二是需要指定网页中的元素manifest属性值来设定缓存文件.

2状态检测与缓存更新

对纯静态的Web站点而言，离线存储的应用非常简单，而在实际工作中往往会遇到很多交互性很强的Web应用程序，这就要应用程序具有判断是否离线的功能，从而决定发送交互数据到服务器还是浏览器.另外，不断测试发现，即便更新了存储于服务器上的缓存文件本身，也不能引起浏览器输出的变化，这是因为当Web站点被访问一次后，以后的若干次访问均会从客户端而不是服务器端读取相应的资源，直到检测到manifest文件本身发生更新或清空浏览器缓存文件.

2.1在线状态检测

很多Web应用程序均包含BS交互的页面，即需要用户通过浏览器端输入数据后提交给服务器端处理，所以还需要提供是否在线的判断机制，使用户知道提交的数据是存储于服务器端还是浏览器端.HTML5提供了online/offline两种事件[6]用来监听浏览器状态，通过将这两个事件绑定到body，document和window对象上进而监测navigator.online属性的值来判断是否在线，程序如下：

var lineStatus = document.getElementById(‘line-status’); //获取id为line-status的元素

var updateLineStatus = function(event) {

if (navigator.onLine) //用于判断在线或离线

{

lineStatus.style.backgroundColor =‘green’;//如果在线，则将line-status元素背景色设置为绿色

lineStatus.innerHTML = ‘online’;//在line-status元素内部放置online文本

} else {

lineStatus.style.backgroundColor = ‘red’;//如果离线，则设置line-status元素背景色为红色

lineStatus.innerHTML = ‘offline’;//在line-status元素内部放置offline文本

}

}

updateLineStatus();

document.body.addEventListener(‘online’, updateLineStatus, false); //监听浏览器的在线状态

document.body.addEventListener(‘offline’, updateLineStatus, false);//监听浏览器的离线状态

2.2缓存更新

当配备有离线缓存技术的Web应用程序被初次访问后，浏览器就会自动缓存被设置为离线存储的资源，直至浏览器清空缓存或manifest文件本身被更新才会从服务器重新加载这些缓存文件，这种通过更改manifest文件本身引起的更新方式被称为自动更新.HTML5还提供了另外一种更新方式，这种方式使用window.applicationCache接口更新缓存，它通过检测window.applicationCache.status的值来判断是否需要更新缓存，程序如下：

if (window.applicationCache.status == window.applicationCache.UPDATEREADY)

{//如果应用程序缓存的状态需要更新

window.applicationCache.update(); //调用更新缓存函数更新缓存

}

3Web数据的本地存储

Web数据的本地存储是指离线时将BS交互数据存储于浏览器端，等网络恢复时再把这些数据[7]同步到服务器，比如在规定时间之前需要将某班级学生成绩全部输入并提交给服务器，可就在提交瞬间网络中断，如果应用程序配置了离线存储功能，离线存储机制就会把输入的数据临时存储于浏览器端缓存，等网络恢复时再从缓存中读取这些数据并同步给服务器,否则数据就会完全丢失.基于HTML5的离线存储有DOM Storage和WebSQL Storage两种机制[8]，分别以key/value和本地数据库的形式持久存储数据.

3.1DOM Storage

DOM Storage是指基于客户端的数据存储，它有更大的存储容量和较灵活的存储方式，它通过一种标准接口而不是直接请求服务器来访问数据.DOM Storage的API提供了SessionStorage和LocalStorage两种安全保存数据的方法，SessionStorage是一种会话级别的存储，它将数据存储于Session对象[9]中，一旦会话结束，Session对象存储的内容即失效，通常用于存储单事务数据或与页面紧密相关且随会话存在而存在的数据；LocalStorage是一种基于域的持久存储数据的方式，这些数据会永久保存于客户端中，直到缓存清空或程序明确删除.虽然如此，由于浏览器存储域的不同，不同浏览器间不会共享这些已经存储的数据，以下程序段展示了从缓存读取姓名和年龄值到表单中的过程：

if (window.SessionStorage) {//如果浏览器支持SessionStorage

var name = window.SessionStorage.getItem("name"); //获取已经缓存过的name值

var age = window.SessionStorage.getItem("age"); //获取已经缓存过的age值

if (name != "" ‖ name !=null){ //如果name不为空或name存在

document.getElementById("name").value = name; //将name值赋给Web页面id为name的元素

}

if (age !="" ‖ age !=null){ //如果age不为空或age存在

document.getElementById("age").value = age;//将age的值赋给Web页面id为age的元素

} } else {

SessionStorage，} //浏览器不支持

DOM Storage存储机制将字符串以键/值对的形式安全存储，所有存储于Storage对象中的数据均以字符串形式存在.

3.2WebSQL Storage

WebSQL是一个基于Transaction-SQL的数据库，可以存储复杂的关系型数据.WebSQL有openDatabase,transaction和executeSql这3个核心方法，openDatabase用于使用现有数据库或创建新数据库创建数据库对象，transaction用于控制事务提交和回滚操作，executeSql用于具体的SQL语句.在具体使用时，会涉及创建/打开/连接数据库、创建表、操作表等操作，以下示例说明了这些常用操作的使用方法：

第1步，打开/创建/连接数据库.

var dataConn = openDatabase("person", "1.0", "人员表", 1 024 * 1 024, function () { });//person是数据库名，1.0是数据库版本，人员表是指数据库具体描述信息,1 024*1 024是数据库容量，function()是指回调函数(可以省略)

if (!dataConn) { alert("数据库创建失败！");}

else { alert("数据库创建成功！");}

第2步，创建数据表.

dataConn.transaction( function(tx) {

tx.executeSql(

"create table if not exists perInfo (per_Id REAL UNIQUE, per_Name TEXT)",

[],

function(tx,result){ alert(‘创建perInfo表成功’); },

function(tx, error){ alert(‘创建perInfo表失败:’+error.message);

}); });

executeSql()函数有4个参数，第1个表示需要执行的SQL语句，第2个表示插入到查询语句中问号( )所在处的数据，第3个和第4个表示执行成功和失败时返回的结果.

第3步，操作表(以插入数据为例).

dataConn.transaction(function (tx) {

tx.executeSql("insert into perInfo (per_Id, per_Name) values( , )",

[1, ‘pido’],//第1个问号用1代替，第2个问号用pido代替

function () { alert(‘添加数据成功’); },

function (tx, error) { alert(‘添加数据失败: ’+error.message);

} ); });

4结语

Web应用程序的离线应用通常包括文件资源缓存和BS交互数据存储两部分.HTML5提供的Web Storage和Web DataBase Storage两种离线存储机制不仅可以实现资源文件的客户端存储，还可以实现BS交互数据的持久存储.在应用程序根目录下配置manifest文件的Cache段参数来实现资源文件的存储，对于其他BS交互数据既可以用DOM Storage实现，也可以用WebSQL Storage实现.这种数据库最大的特点是可以使用客户端脚本JS来创建、打开并操作数据库或数据表.基于HTML5的离线存储机制不仅实现了网络资源的脱机访问，而且有效地解决了Web数据的脱机存储和网络恢复时数据同步服务器的问题，在Web应用程序的开发中有着较强的实用价值.

参考文献：

[1]朱远文，张煜，常畅．基于Cookie的安全防护技术研究[J].信息网络安全，2012(9)：46-49.

[2]李慧云，何震苇，李丽．HTML5技术与应用模式研究[J].电信科学，2012(5)：24-29.

[3]胡晶，董航．HTML5核心Web技术分析[J].长春工业大学学报：自然科学版，2013，5(34)：587-590.

[4]罗大晖，陈娟．基于HTML5的Web离线应用研究与实现[J].计算机应用与软件，2012，12(29)：262-264,305.

[5]张永瑞．基于HTML5的Web离线技术在技能训练导学平台中的应用[J].长江大学学报:自然科学版，2013，10(28)：37-39.

[6]蹇红梅．Web平台下的基于HTML5标准离线应用开发[J].四川理工学院学报：自然科学版，2012，5(25)：41-44.

[7]张青凤，张凤琴，王磊．多数据中心的数据同步模型研究与设计[J].微型机与应用，2013，32(12)：60-62，66.

[8]卢远征，叶晓彤．XML的DOM树结构在WEB挖掘中的应用[J].四川理工学院学报： 自然科学版，2013，26(3)：64-67.

[9]徐宝磊，王安志．基于Session的单点登录系统研究与设计[J].重庆文理学院学报：自然科学版，2012，31(2)：75-77.

Research and discussion of web offline application based on HTML5

LIU Yaoqin

(DepartmentofComputerScience,YunyangTeachers′College,Shiyan442000,China)

Abstract:HTML5 is seen as a language description way of constructing Webpage content, which gives the Webpage meaning and structure better. With the large-scale application of HTML Web application, developers often encounter the problems of storing Web data background to offline, HTML5 provides Web Storage and Web Database Storage mechanism, which are respectively used for storing the key/value and complex interactive data, it has larger storage capacity and higher effectiveness than cookie technology, so the offline data storage and server synchronization problems are solved efficiently.

Key words:HTML5; offline storage; resource cache; manifest; WebSQL

作者简介：刘耀钦(1980-)，男，河南禹州人，讲师，硕士，主要研究方向为信息安全与Web存储技术.

基金项目：郧阳师范高等专科学校2014年重点科研项目(2014A01)

收稿日期：2014-10-15

中图分类号：TP311

文献标志码：A

文章编号：1674-330X(2015)01-0077-04