一种基于HTML5的WebSQL与服务器端数据库同步的方法

摘要

本发明提供一种基于HTML5的WebSQL与服务器端数据库同步的方法，属于计算机技术领域，基于HTML5的应用程序通过JavaScript定义的一组函数和变量，对浏览器在线或离线状态进行检测。当浏览器在线时，JavaScript接口函数把服务器端的基础数据同步到浏览器端的WebSQL数据库，并对服务器端数据的变更状态进行检测，把发生变更的动态数据从服务器端数据库同步到客户端WebSQL数据库。当浏览器离线时，HTML5应用程序可依赖WebSQL正常运行，通过接口函数把客户端的动态数据缓存到LocalStorage和WebSQL数据库，当检测到浏览器在线时，再把数据同步到服务器端的数据库中。通过本方法，可大大降低应用程序对网络带宽的占用，提升运行速度和用户体验。

说明书

技术领域

本发明涉及计算机技术，尤其涉及一种基于HTML5的WebSQL与服务器端数据库同步的方法。

背景技术

在传统的基于互联网的软件产品中，当遇到网络不稳定、网速比较慢、甚至网络中断的情况，超长的页面下载时间只会让客户抓狂，因此页面打开速度对用户体验有重大影响。利用基于HTML5的本地数据库WebSQL相关数据库技术，用于持久存储一些不经常发生变化的基础数据，浏览器读取这些数据时，不再依赖于从网络传输，便可大大降低应用程序对网络带宽的占用，提升运行速度和用户体验，还能保证在网络中断时应用的畅通性。

基于HTML5互联网的应用软件，还要保证动态数据的实时性。浏览器在线时，需要通过一种机制和方法，一方面把离线时缓存在WebSQL或LocalStorage的动态数实时同步到服务器，另一方面把缓存在服务器端的数据同步到WebSQL，以保证客户端WebSQL与服务器端数据库的数据一致性。

发明内容

为了解决HTML5应用程序利用本地WebSQL数据库与来自服务器端的基础数据的同步问题，为了解决缓存在服务器端和浏览器客户端的动态数据的同步问题，本发明提出了一种基于HTML5的WebSQL与服务器端数据库同步的方法，让基于HTML5的应用程序在使用WebSQL数据库时，能与网络服务器端的数据库实现数据同步，且能保证数据的一致性，目的是提供一种方法保证HTML5应用程序遇到网络不稳定或离线时，能利用WebSQL数据库正常运行。

本发明主要通过以下方式实现，其特征在于它包含以下内容：

A.定义数据同步的各种接口函数和变量；

B.定义基于HTML5的动态数据的缓存机制；

C.定义运行时同步逻辑的控制方式。

其中，“函数”是JavaScript中的一个“function”对象，由事件驱动的统一的代码块。“动态数据”是应用程序运行过程中生成或发生变化的业务数据。

其中A所述的内容，

定义数据同步的各种接口函数和变量：为了保证基于HTML5的应用程序在运行过程中的动态数据能够在浏览器端WebSQL数据库和服务器端数据库之间同步传输，而且需要保证两端数据的一致性，需要遵循一定的业务规则和标准来定义数据同步的各种接口函数和变量，接口函数和变量包含如下几个组成部分：

(1)定义动态数据变量，根据业务规则，用以标记在应用程序运行过程中生成或发生变化的数据，既有服务器端的数据，又有浏览器端的数据。

(2)服务器动态数据保存接口函数，根据数据库的数据格式定义的业务接口规范，通过接口函数实现获取服务器端生成的动态数据，并按照已定义的标准或规则保存到数据库或数据文件中。

(3)服务器端的描述数据发生变化的状态变量，并根据服务器端的数据变化及同步完成状态，实时更新数据状态标识，以标记是否需要从服务器端向WebSQL同步数据。

(4)记录服务器端动态数据数量的变量，根据服务器端变化数据的数量，实时更新数量标识，以辅助标记有多少数据需要从服务器端向WebSQL同步数据。

(5)服务器动态数据删除接口函数，根据服务器的同步策略、数据一致性策略。当数据同步结束后，需要标记或清除数据库或数据文件中已经完成同步的动态数据。

(6)基于HTML5的JavaScript动态数据保存接口函数，根据数据库的数据格式定义的业务接口规范，通过接口函数实现获取服务器端生成的动态数据，并按照已定义的标准或规则保存到WebSQL或LocalStorage客户端本地存储中。

(7)浏览器端用JavaScript描述数据变化的变量，并根据客户端的数据变化及同步完成状态，实时更新数据状态标识，以标记是否需要从WebSQL向服务器端同步数据。

(8)记录浏览器端动态数据数量的变量，根据浏览器端变化数据的数量，实时更新数量标识，以辅助标记有多少数据需要从WebSQL向服务器端同步数据。

(9)浏览器端动态数据删除接口函数，根据服务器的同步策略、数据一致性策略。当数据同步结束后，需要标记或清除WebSQL或LocalStorage中已经完成同步的动态数据。

(10)浏览器的在线状态变量，根据navigator.onLine和握手信号的返回情况标记浏览器的在线、离线状态。

(11)浏览器与服务器间通信握手接口函数，利用Ajax请求、应答方式实现通信握手，以判断浏览器在线、离线状态。

其中B所述的内容，

定义基于HTML5的动态数据的缓存机制，根据浏览器在线、离线时的状态变量，由JavaScript接口函数处理浏览器端动态数据。

(1)当浏览器在线时，动态数据直接通过Ajax与服务器端接口实现数据交互，并同步通过JavaScript接口与本地WebSQL实现数据交互。

(2)当浏览器离线时，将通过JavaScript动态数据保存接口函数，完成动态数据在WebSQL或LocalStorage中的缓存，同时更新描述数据变化的变量的状态，并更新描述动态数据数量的变量的数值。

(3)当浏览器从离线变为在线时，JavaScript接口函数会从WebSQL向服务器端同步数据，并更新变量的状态和数值。

其中C所述的内容，

定义运行时同步逻辑的控制方式，不管浏览器在线或离线，通过对同步逻辑的控制，既可降低应用程序对网络带宽的占用，提升运行速度和用户体验，还能保证在网络中断时应用的畅通性。

(1)首次加载HTML5应用程序调用JavaScript接口函数时，在线时仅需同步一次基础数据。运行过程中HTML5应用程序只需调用本地JavaScript接口函数从WebSQL读取数据，减少网络带宽的占用。直到基础数据发生变更后，接口函数会再次同步一次数据。

(2)当浏览器在线时，客户端的动态数据与服务器实时交互，并同时更新HTML5本地WebSQL数据库。JavaScript接口同步检测服务器数据状态的变化，有远端的数据更新或远端的数据请求，会从服务器实时同步数据到本地WebSQL。

(3)浏览器离线时，JavaScript接口停止与服务器实时交互，本地操作基于HTML5的数据更新或数据请求，会保存到WebSQL或LocalStorage自动缓存，以备在线时与服务器同步。

(4)运行时对数据一致性的控制，是为了保证数据的一致性，而制定的数据同步策略。利用JavaScript回调函数，处理从服务器返回的数据并同步处理更新WebSQ的事物，成功后再利用Ajax回调更新服务器的接口函数。

通过本发明提供的方法，让基于HTML5的应用程序在使用WebSQL数据库时，能与网络服务器端的数据库实现数据同步，且能保证数据的一致性，既能降低应用程序在线时对网络带宽的占用，又保证应用程序遇到网络不稳定或离线时正常运行，大大改善用户体验。

附图说明

图1是本发明实现同步逻辑控制的流程图。

具体实施方式

参考参照附图1以具体实施为例对本发明提供的一种基于HTML5的WebSQL与服务器端数据库同步的方法进行详细说明。

其具体实施方式包括：定义数据同步的各种接口函数和变量、定义基于HTML5的动态数据的缓存机制、定义运行时同步逻辑的控制方式。

定义数据同步的各种接口函数和变量：

(1)根据业务规则定义动态数据变量，用以标记在应用程序运行过程中生成或发生变化的数据，既有服务器端的数据，又有浏览器端的数据。

定义一组Session变量：

(2)服务器动态数据保存接口函数，根据数据库的数据格式定义的业务接口规范，通过接口函数实现获取服务器端生成的动态数据，并按照已定义的标准或规则保存到数据库或数据文件中。

(3)服务器端的描述数据发生变化的状态变量，并根据服务器端的数据变化及同步完成状态，实时更新数据状态标识，以标记是否需要从服务器端向WebSQL同步数据。

(4)记录服务器端动态数据数量的变量，根据服务器端变化数据的数量，实时更新数量标识，以辅助标记有多少数据需要从服务器端向WebSQL同步数据。

(5)服务器动态数据删除接口函数，根据服务器的同步策略、数据一致性策略。当数据同步结束后，需要标记或清除数据库或数据文件中已经完成同步的动态数据。

(6)基于HTML5的JavaScript动态数据保存接口函数，根据数据库的数据格式定义的业务接口规范，通过接口函数实现获取服务器端生成的动态数据，并按照已定义的标准或规则保存到WebSQL中。

定义态数据操作的接口函数：

(7)浏览器端用JavaScript描述数据变化的变量：

var Sys.SQLLIST＝{}； //缓存SQL或动态数据的列表

(8)记录浏览器端动态数据数量的变量：

var Sys.SQLLIST.size＝0；//缓存SQL或动态数据的数量

(9)浏览器端动态数据删除接口函数，根据服务器的同步策略、数据一致性策略。当数据同步结束后，需要清除LocalStorage中已经完成同步的动态数据。

(10)浏览器的在线状态变量，根据navigator.onLine和握手信号的返回情况标记浏览器的在线、离线状态。

定义网络状态描述变量：

(11)浏览器与服务器间通信握手接口函数，利用Ajax请求、应答方式实现通信握手，以判断浏览器在线、离线状态。

定义同步接口函数：

window.setInterval(netStatus.refresh,FREQUENCY)；

定义基于HTML5的动态数据的缓存机制：

(1)应用程序启动后开始系统初始化，如果是第一次启动，WebSQL内无数据，则下载数据并同步更新本地WebSQL。之后调用接口函数与服务器同步检查，查询服务器基础数据状态，若有数据更新则下载数据并同步更新到本地WebSQL。

(2)数据业务正常运行时，应用程序根据是否在线状态进行判断，优先与服务器进行数据交互通信，若与服务器交互失败，则与本地WebSQL数据库执行同样的数据交互。在线时，动态数据直接通过Ajax与服务器端接口实现数据交互，并同步通过JavaScript接口与本地WebSQL实现数据交互。

(3)业务数据需要更新时，调用JavaScript接口函数对本地WebSQL和服务器读写，若与服务器通信失败(读写失败)，那么需要读写本地数据库。

(4)HTML5应用程序在离线时，将通过JavaScript动态数据保存接口函数，完成动态数据在WebSQL或LocalStorage中的缓存，同时更新描述数据变化的变量的状态，并更新描述动态数据数量的变量的数值。在线后需要应用程序重新与服务器交互并提交数据。

(5)当浏览器从离线变为在线时，JavaScript接口函数会从WebSQL向服务器端同步数据，并更新变量的状态和数值。首先更新服务器，然后再执行其他操作(包括数据查询)。

定义运行时同步逻辑的控制方式：

本发明方法中实现同步逻辑控制的流程图参照附图1，并在此基础上进行详细说明如下：

(1)首次加载HTML5应用程序调用JavaScript接口函数时，在线时仅需同步一次基础数据。运行过程中HTML5应用程序只需调用本地JavaScript接口函数从WebSQL读取数据，减少网络带宽的占用。直到基础数据发生变更后，接口函数会再次同步一次数据。

(2)当浏览器在线时，客户端的动态数据与服务器实时交互，并同时更新HTML5本地WebSQL数据库。JavaScript接口同步检测服务器数据状态的变化，有远端的数据更新或远端的数据请求，会从服务器实时同步数据到本地WebSQL。

(3)浏览器离线时，JavaScript接口停止与服务器实时交互，本地操作基于HTML5的数据更新或数据请求，会保存到WebSQL或LocalStorage自动缓存，以备在线时与服务器同步。