基于HTML5的Web离线应用模型在学生信息管理系统中的应用

肖祯怀，许 文

（1.商丘职业技术学院，河南 商丘 476000；2.商丘师范学院，河南 商丘 476000）

学生信息管理是学校管理重要的组成部分，随着信息技术的发展，从原先的单机版到网络版，从 C/S模式到 B/S模式。但是B/S模式应用在遇到网络暂时不可用问题时，可能会造成B/S的程序无法正常运行，因此离线Web应用技术应运而生。

本文通过对比研究现有的Web离线应用系统技术，提出基于HTML5的Web离线应用架构模型OFF-ORDER，支持离线和本地存储，并应用在学生信息管理系统中。

该系统不仅能够存储和管理各种学生信息，具备相应的统计功能，使教师和学生能够方便地查阅有关的信息，而且可以通过浏览器离线完成各项操作，大大提高了学校的办公效率。

1.HTML5

HTML5正在被开发成HTML的主要版本，也是Web的核心标记语言[1]。HTML5被提议为继HTML 4.01、XHTML 1.0和DOM Level2 HTML之后的下一个标准，它旨在减少对基于专有插件的胖互联网应用（Rich Internet Application，RIA）技术的需要，这些技术包括Adobe Flash、微软Silverlight以及Sun JavaFX技术[2]。HTML5规范在2007年被采用，作为万维网联盟新的HTML工作组工作的出发点。

2.基于HTML5的Web离线应用架构

早期的HTML页面通过把页面信息保存到本地缓冲区，在“脱机浏览”的状态下能看到部分信息，但它远远满足不了动态信息交互的需求;发展到ASP、JSP

等实现动态信息交互的技术阶段，使用Cookie技术缓存动态数据，因其空间和安全限制，难以实现离线应用。

当前Web离线应用架构虽然能够给用户提供强大灵活的离线功能保证，但是具有以下缺点：严重依赖插件（如Google Gears本质是ActiveX），插件不仅面临着版本限制，而且面临着安全威胁，同时应用平台具有局限性；同步更新时，数据传输采用的是效率低又耗费带宽的轮询方式[3]。

鉴于以上缺点，结合现有的Web离线应用架构，本文引入HTML5技术，并提出基于HTML5的Web离线应用架构，使系统的效率得到优化[4]。如图1所示。整个架构包括服务端（server）和客户端（Client）[5]。

下文将重点说明该架构在本地服务、本地存储、数据同步和数据传输4个方面的实现。

图1 基于HTML5的Web离线应用架构

2.1 本地应用

在用户计算机上保存应用程序和Web文件以供日后使用。只需要访问Internet一次就可以下载运行应用程序所需要的全部文件，不论Intemet连通与否，都可以使用应用程序。文件下载之后，应用程序在浏览器中运行，但运行时使用的是已经下载的这些文件，就像桌面应用程序一样，与服务器或网络连接的情况无关。

HTML5脱机应用提供了新的ApplicationCache对象，以及管理整个过程的方法、属性以及事件。

Navigator对象使用属性onLine代表连接的当前状态。这个属性有两个事件，会在它的值发生变化时触发。

2.2 本地存储

在HTML5 Web Storage本地存储中，数据的本地存储包含了Local Storage和Session Storage。Session Storage只在页面会话期间保持数据可用。就像是会话cookie的替代。

HTML5 Web Storage本地存储的优势：存储空间更大，能够满足大部分Web应用程序的需求。本地存储的数据内容不会自动发送到服务器端，特别是Local Storage只在本地使用，不会与服务器端发生交互，减少了用户带宽的消耗。

Indexed DB 是一种索引的层次性键-值存储。在IndexedDB中，数据库中的信息以对象的形式存储在对象库中。对象库没有特定的结构，只能够找到其中对象的名称和索引。这些对象也没有既定的结构，每个对象的结构可以各不相同，多复杂都可以。

2.3 数据同步

数据的同步时离线应用模型的核心。在数据同步问题上，目前的数据库相关模型在同步问题上有不同的技术选择，如文件传输技术、数据复制技术等。本文数据同步选择净变化方式。

本地时间和网络时间不一致时经常发生的事情，所以选择服务器端的修改时间，记为时间戳T。同时在数据库中加上一个客户端修改标记bool型字段用于控制同步过程，目的是在网络恢复时，检查是不是需要同步服务器端数据和本地客户端数据。

比较客户端T和服务器端T，如果相同，则表示数据在客户端和服务器端没有变化，不需要同步；如果不相同，则表示在这个时间段内，数据发生了改变，需要同步数据。

2.4 数据传输

在 HTML5中，数据传输采用 WebSocket。HTML5 WebSockets规范定义了WebSockets API。为浏览器和服务器之间更快、更高效的双向通信提供了连接支持。连接是通过TCP套接字建立的，中间不需要发送HTTP标头，因此减少了每次调用中传输的数据量。

3.学生信息管理系统的应用

将基于HTML5的Web离线应用架构模型应用到学生信息管理系统中。在学生信息管理系统数据录入、修改及删除时，例如学生入学时的原始信息的输入、修改，如学号、姓名、性别、班级、出生日期、籍贯等；删除学生的信息，完成学生各学年的奖罚情况的输入与修改；完成学籍变动情况的记录，包括休学、复学、转系、结业、毕业等。

在浏览器客户端，用户登录上学生信息管理系统后。在网络不可用的情况下，当输入学生数据或修改学生数据时，系统将数据写入本地数据库中。在数据库中，有一个时间戳作为一个字段，用来做数据的版本。

当网络可用时，系统的状态监测模块检测到后，比较本地和远程服务器端中的数据变化。当发生变化时，将数据传送到远程数据库中，采用净变化更新的方式。同时更新同步控制用的状态值。表示本次数据已经同步。

当用户修改学生数据时，对比本地数据库和远程数据库服务器中的数据，将增量更新数据到远程数据库中。

网络相对本地来说是不可靠的，使用离线应用的学生管理系统则可以防止在网络不可用时，系统不能使用。这从而大大方便了用户的使用。同时由于程序已经下载到本地，浏览器加载的时候缩短了等待时间，提高了前端性能。

4.系统性能

用户在使用Web系统中，大量的查询的结果往往是重复的。这对服务器来说，无疑增加了大量的网络带宽和带来了系统资源的压力。Web离线学生管理系统在应用加载和数据查询方面，不仅减轻了服务器端压力，而且提高了前端性能，提高了用户体验。

在没有使用Web离线系统时，系统的平均加载时间在0.8～5秒左右；当然随着服务器性能和网络会有一定的变化。在使用离线系统后，平均加载时间在 0.4～3秒左右。可以看出使用Web离线系统提高了前端性能，减轻了服务器的压力，提高了用户体验。如图2所示：

图2 两种查询性能对比图

5.结束语

基于HTML5的Web离线应用模型在学生信息管理系统中的应用，是在 B/S 模式下的MIS 系统 （管理信息系统），它使用了离线应用和离线存储对学生信息进行管理。在网络不可用时，支持在浏览器内离线使用系统，支持数据本地存储，支持数据同步增量更新，同时支持数据的实时同步。提高了用户体验，提高了前端性能。随着HTML5技术的成熟和普及，系统将在效率、安全性、完整性等方面的性能将得到极大的提高。根据信息技术的发展现状，这种数据处理形式在今后将会成为主要的信息处理和管理形式。

[1]Bruce Lawson，Remy Sharp.HTML5 用户指南[M].刘红伟，译.北京: 机械工业出版社，2011.

[2]Kevin Purdy.How HTML5 Will Change the Way You Use the Web[J].IEEE Jouma1，2009，（3）.

[3]谭骏珊，吴昌盛.基于 B/S 模式应用系统性能优化的研究[J].计算机应用，2003，（1）.

[4]王非.富互联网应用中框架技术实现Web信息系统[J].计算机应用，2008，（10）.

[5]周杨.AJAX 应用的典型设计模式[J].计算机系统应用，2011，（1）.