HTML5离线应用开发技术研究

陈贻品 匡成宝（通讯作者） 湖南高速铁路职业技术学院

HTML5离线应用开发技术研究

陈贻品 匡成宝（通讯作者） 湖南高速铁路职业技术学院

本文在讲解HTML5技术的新特性的同时着重介绍在网络异常时web应用的数据处理和解决方法。离线状态下的数据通过离线资源缓存、在线监测、本地数据存储等三步骤来处理。通过客户端前期储存数据的技术比较来改善它的不足，本文通过HTML5的webstorage API的技术让客户端数据储存的开发方法变得更加的简单易行。

HTML Web 离线应用

在上世纪90年代HTML技术应运而生。20世纪90年代末，经典的HTML4成为互联网标准。HTML5的前身是web application 1.0草案，该草案2004年被提出2007年被W3C认可。2008年新一代的HTML技术HTML5在1月22日正式发布，新技术在修复上一代技术种种问题的同时增强了多媒体方面的表现，并且增加和废除了一部分标签。现如今HTML5已解决了浏览器对众多插件的依赖，并得到了大部分浏览器的技术支持。

1 HTML5关键技术

创建一个成熟的应用平台是HTML5的目标，与之前的web相比它还用来表示web的内容。本文通过对离线应用的开发作为研究的重点，对离线应用的特点和技术的特性进行深入的探究分析，通过相关的研究以后，将现阶段web领域中新颖的技术，进行全面的跟踪和利用，以此来提升HTML5离线应用技术。

2 HTML5的离线应用及开发

2.1 离线资源缓存

在HTML5中可以使用cache manifest来实现简单的静态页面离线资源缓存，具体实施方法有两种，分别是手动和自动两种缓存更新方式。首先要在cache manifest中列出目标缓存资源，在浏览器在离线的情况时将目标文件缓存到本地。之后当客户端处于在线的状态时，目标文件通过应用程序自动加载。

2.2 在线状态检测

在开发基于web应用程序的实际过程中，通常要针对是否在线来做出相应的处置。在HTML5中可以通过两种方式年检测浏览器是否在线，分别是Navigator．online属性和online与offline。Navigator．online属性为一个布尔值，当在线时布尔值为true，反之为离线状态。通过获取布尔值确定了当前网络的在线状况之后，开发者根据不同的情况编写相应的应用代码。

cache manifest缓存资源文件可以实现用户离线时访问静态页面，但当需要完成客户端处于离线状态下的数据交互应用时，首先必须要判断当前web的在线状态之后客户端浏览器与web服务器才能实现数据交互。

2.3 本地数据储存

在HTML4和更早的版本中，数据一般是通过cookie储存机制保存在用户客户端的，这种方法有很多的缺陷，例如会限制数据的大小、保密性不强等特点。随着web应用技术的不断深入，HTML5为了数据能够在离线与在线状态下，更好、更多、更快的储存到客户端与同步到服务器上，HTML5针对不同的储存需要提供了两种新的储存方式，分别为Web Database与Web SQL Database。Web Database主要功能是临时或永久保存客户端的少量数据。Web SQL Database是客户端本地化的一套数据库系统，可将大量的数据保存在客户端。

2.4 webstorage存储

在HTML5中web储存分两种，分别是localStorage与sessionStorage。所以localStorage与sessionStorage的区别在于后者保存当前访问的页面。Webstorage页面储存是HTML5中的一项重要技术，它的主要作用是将数据储存在客户端，区分长期数据和会话数据可以通过WebstorageAPI来实现，所以对应的API分sessionStorage(保存会话数据)、localStorage（在客户端长期保存数据)

2.5 IndexedDB

IndexedDB是一种数据库，是用来将结构化数据储存到浏览器中的。IndexedDB开发了一套API支持搜索查询并且还能够方便的存取JavaSeript对象。HTML5－WebStorage中的一个重要环节就是IndexedDB，是一种轻量级NOSQL数据库，W3C给IndexedDB定义了许多的接口，Database对象定义成IDBDataBase，从IDBFactory中可以获得IDBDataBase。浏览器对象中只有indexedDB这个实例实现了IDBFactory。

3 小结

本文通过HTML5的离线应用特性解决了当网络连接异常时的离线数据储存，从离线数据应用的实际情况开始，通过离线资源缓存、在线检测、本地数据存储等过程，探讨在怎么实现离线状态下交互式页面客户端数据存储和静态页面离线资源缓存，并为web应用在离线时的开发提出了有效的做法，相信随着时代的不断发展，HTML5终会越来越成熟。

[1]龙奇．新一代网络技术标准HTML5的研究［J］．科学信息，2011(10):245

[2]黄永慧，陈程凯．HTML5在移动应用开发上的应用前景［J］．计算机技术与发展，2013(7)：207-210