使用HTML5数据库和离线功能提供离线数据编辑和数据同步化HTML5将扩展Web体验和业务线应用程序。有了离线功能和本地持久存储特性,您不管是在线还是离线状态都可以交付同样丰富的用户体验,这些体验以前只可在专用的桌面应用程序开发框架中获得。在本文中,您将了解如何利用HTML5的离线功能和本地持久存储特性。示例应用程序说明了如何避免常见的问题。BrianJStewart,首席顾问,AquaDataTechnologies,Inc.2012年11月30日常用缩写词CRUD:创建、读取、更新和删除HTML:超文本标记语言JSON:JavaScript对象表示法LOB:业务线UI:用户界面简介HTML版本5(HTML5)并不期望在2012年之前获得万维网联盟(W3C)推荐。尽管HTML5不是官方标准,但Web浏览器供应商正在增加和营销HTML5特性。HTML5正在为Internet网站和业务线(LOB)应用程序扩展Web体验。像AmazonKindleCloudReader等许多网站已经开始使用HTML5。有两个关键的HTML5特性会显著更改LOB应用程序:离线应用程序支持和本地持久存储。由于HTML5不是一个官方标准,所以浏览器支持是不一致的。在本文中,您将了解由HTML5标准提供的有关离线应用程序支持和不同持久存储功能的信息。示例应用程序有助于说明这些特性。示例应用程序ContactManager示例应用程序专为管理联系信息(姓名、地址和电话号码)而提供的。它提供了一种在线模式、一种离线模式,以及一种简单的数据同步化功能,以使本地数据更改与切换到在线模式服务器实现同步。当处于离线状态时,数据于本地持久存储。应用程序支持在线和离线模式下的四个基本持久存储功能:创建、读取、更新和删除(CRUD)。架构图1展示了ContactManager应用程序架构的概述。服务器架构包括两个servlet:业务服务和数据提供程序。用户界面包括一个单一的HTML文件、四个JavaScript模块,以及一个jQuery库最新版本的外部引用。图1.应用程序架构概述数据模型数据模型包括两个数据实体:联系人和状态,如图2所示。联系人表包含实际的联系人数据;状态表包含状态选择列表的字典值。图2.数据模型服务器界面服务器界面包含两个servlet:ContactServlet和DictionaryServlet。表1对servlet进行了总结。(servlet的实现和相应业务服务与数据提供程序不在本文的讨论范围之内。)表1.servlet摘要Servlet名称操作参数描述DictionaryServletcodegetstatesN/A以JavaScript对象表示法(JSON)格式返回一个状态数组。ContactServletgetallcontactsN/A以JSON格式返回一个联系人数组。ContactServletdeletecontactId:需要删除的联系人ID。删除指定的联系人记录;返回一个JSON对象,并带有一个Boolean标志来表明操作是否成功。{result:true/false}ContactServletsavecontactId:需要保存的联系人ID。(如果大于0,则是一项更新操作。)firstName:第一个名称字段的值。lastName:最后一个名称字段的值。street1:街道1字段的值。street2:街道2字段的值。city:城市字段的值。state:状态字段的值。zipCode:邮编字段的值。返回一个带有Boolean标识的JSON对象,用于表明操作是否成功,是否是新的或更新的联系人ID。{contactId:id,result:true/false}调用服务器界面清单1中的代码显示了如何对联系人servlet进行异步调用来检索存储于在线数据库中的联系人。代码使用了jQuerygetJSON函数来调用联系人servlet。清单1.从服务器中检索联系人functionloadOnlineContacts(){$('#contactList').empty();$('#contactList').append('Loadingcontactdata...');varurl='/html5app/contact?operation=getallcontacts';$.getJSON(url,function(data){saveOfflineContactData(data);displayContactData(data);});}清单2中的代码显示了如何将一个新的或者更新的联系人保存到服务器中。它使用了jQueryajax函数。代码使用HTTPPOST将数据发送到联系人servlet。清单2.把联系人保存到服务器中functionpostEditedContact(dataString){postEditedContact(dataString,false);}functionpostEditedContact(dataString,suppressAlert){varcontactId=$('input[name=contactId]')[0].value;$.ajax({type:POST,url:/html5app/contact,data:dataString,cache:false,dataType:json,success:function(data){varresult=data.result;if(result){if(contactId0){if(!suppressAlert){alert(Contactwassuccessfullyupdated.);}varlastModifyDate=data.lastModifyDate;$('input[name=lastModifyDate]')[0].value=lastModifyDate;}else{if(!suppressAlert){alert(Contactwassuccessfullycreated.);}varlastModifyDate=data.lastModifyDate;$('input[name=lastModifyDate]')[0].value=lastModifyDate;$('input[name=contactId]')[0].value=data.contactId;}loadOnlineContacts();hideEditForm();}else{alert('Anerroroccurredsavingcontact'+contactId+'.');}}});}最后一个函数从在线数据库中删除记录。清单3显示了如何从服务器中删除记录。代码使用jQuerygetJSON函数来调用联系人servlet。清单3.删除服务器上的联系人functiondeleteOnlineContact(contactId,suppressAlert){varurl='/html5app/contact?operation=delete&contactId='+contactId;$.getJSON(url,function(data){varresult=data.result;if(result){if(!suppressAlert){alert('Contactdeleted');}loadOnlineContacts();}else{alert('Contact'+contactId+'notdeleted');}});}构建本地数据提供程序本地数据提供程序在本地保存所有的选择列表和联系人数据。HTML5规范包含用于持久存储的内容。使用哪一种技术取决于您的数据存储和浏览器支持。以下部分将讨论三种持久存储技术,以及使用所有Web浏览器支持的持久存储技术实现一个本地数据提供程序。三种持久存储技术与HTML5有关:localStorage:localStorage使用平键-值存储来提供简单的数据存储。主要的Web浏览器,包括Apple®Safari®、GoogleChrome™、Microsoft®Windows®InternetExplorer®、Mozilla®Firefox®和Opera™均支持localStorage。HTML5localStorage可实现同步,而且是如今惟一一个跨平台和跨浏览器支持数据库的存储机制。WebSQL:WebSQL最初的目的是为Web浏览器带来一个基于Transact-SQL的数据库。学习曲线很少以它同常见关系数据库的相似性为基础,这些关系数据库有IBM®DB2®、MicrosoftSQLServer®、Oracle®MySQL®Server和OracleDatabase。在Safari、Chrome和Opera等浏览器中均支持WebSQL。但是Firefox或InternetExplorer并不支持WebSQL。WebSQL可能会逐渐被淘汰掉,因为已经不再对WebSQL推荐的规范进行开发。索引数据库(IndexedDB):IndexedDB是一种索引的层次性键-值存储,类似于许多商用云数据存储产品。放弃WebSQL对IndexedDB有利,而且现在Firefox和Chrome都支持IndexedDB,将来发行的InternetExplorer10也将提供相关支持。用于IndexedDB的应用程序编程接口(API)是异步的,支持索引、查询和事务。本文中的示例解决方案利用JSON和localStorage来实现持久存储,主要是因为localStorage受到浏览器的广泛支持。本地数据提供程序localStorage方法通过将联系人和字典数据序列化为一个JSON字符串,并将字符串保存在localStorage中,从而持久保存approach联系人和字典数据。当检索数据时,它就被并行化为一个JSON对象的数组并进行相应的处理。在本地保存数据清单4显示了如何将联系人数据保存到localStorage中。JavaScript函数JSON.stringify用于序列化JSON数据,服务器将这些数据返回到一个字符串,这样它才能存储在localStorage中。清单4.将数据保存到localStorage中//fetchdatafromserver...//convertJSONdatatoastringvarcontactDataString=JSON.stringify(data);//persistcontactdatatolocalstoragelocalStorage.setItem(contactData,contactDataString);在本地检索数据清单5显示了如何在localStorage中检索数据。第一步是从localStorage中获取JSON字符串。接着使用JavaScript函数eval将字符串转换成JSON对象。使用自定义JavaScript函数displayContactData来显示数据。清单5.从localStorage中读取数据functionloadOfflineContacts(){$('#contactList').empty();$('#contactList').append('Loadingcontactdata...');vardataStr=localStorage.getItem(contactData);vardata=eval('('+dataStr+')');displayContactData(data);}在本地删除记录清单6显示了如何从localStorage中删除一个记录。清单6.从localStorage中删除一个记录functiondeleteOfflineContact(contactId){vardataStr=localStorage.getItem(contactData);vardata=