基于HTML 5的前端本地化存储技术

李烨民

(四川大学计算机学院，四川成都 610065)

0 引言

目前，Web 2.0给互联网用户带来了新的网络应用方法，具有诱人的应用前景，本地化存储一直是本地客户端程序优于Web应用程序的一个方面.对于本地应用程序，操作系统会提供一个抽象层，用于存储和获取特定于应用程序的数据.这些数据可以存储于注册表、INI文件，或者其他什么地方，这取决于操作系统的实现.如果本地应用程序需要不单是键值对形式的本地存储，可以使用嵌入式数据库或其他很多种解决方案.HTML 5本地存储技术提供了一种方式让网站能够把信息存储到本地的计算机上，并在以后需要的时候进行获取.这个概念和Cookie相似，区别则是它是为更大容量存储设计的，而Cookie的大小是受限的，并且每次请求一个新的页面时候，Cookie都会被发送过去.HTML 5的Storage是存储在计算机上的，网站在页面加载完毕后可以通过Javascript来获取这些数据.

1 主要的前端存储技术

目前，本地存储技术主要有Cookie，Flash SharedObject，Google Gears和User Data.

(1)Cookie.在Web中得到广泛应用，但其局限性非常明显，容量太小，有些站点会因为出于安全的考虑而禁用Cookie，因为Cookie的内容会随着页面请求一并发往服务器.

(2)Flash SharedObject.其使用的是 kissy的store模块来调用 Flash SharedObject.Flash SharedObject的优点是容量适中，基本上不存在兼容性问题，缺点是要在页面中引入特定的swf和js文件，增加额外负担，且处理繁琐.

(3)Google Gears.其是一个基于Firefox和IE的插件，要使用它，必须先安装相应插件，但其官方网站目前已经停止更新.

(4)User Data.其是微软为IE专门在系统中开辟的一块存储空间，只支持Windows+IE的组合.在XP操作系统中，一般位于C:Documents and Settings用户名UserData，有时候会在C:Documents and Settings用户名Application DataMicrosoftInternet ExplorerUserData下.在Vista操作系统中，位于C:Users用户名AppDataRoamingMicrosoft Internet ExplorerUserData.使用save和load方法可将UserData存储区数据保存在缓存中，一旦保存后，即使浏览器关闭，下一次进入该页面，数据仍然存在.对单个文件的大小限制是128 KB，一个域名下总共可以保存1 024 KB的文件，文件个数没有限制.在受限站点里这两个值分别是64 KB和640 KB，所以如果考虑到各种情况的话，单个文件以控制在64 KB以下为宜.

2 HTML 5本地存储技术

HTML 5技术的功能之一是本地存储数据并且允许应用程序离线运行，其有3种不同的处理这些功能的方式:①Web Storage，适用于具有key/value对的基本本地存储;②离线存储，利用一个manifest文件来高速缓存所有文件以便离线使用;③Web数据库，适用于关系型数据库存储.

2.1 Web Storage

在HTML 5技术标准中，除了动态图像、位置服务、多媒体播放功能外，另一个新增的非常重要的功能就是可以在客户端本地保存数据的Web storage功能.该功能使用key/value对来支持存储被Web应用程序访问基本信息和变量.具体来说，有以下2种方式.

(1)sessionStorage.session，是指用户在浏览网页的时候，从进入网页开始到浏览器关闭的这段时间内，将数据保存在session对象中，这里的session对象可以用来保存在此时间段内的所有需要存储的数据.具体为:

保存数据:sessionStorage.setItem(key，value).

读取数据:变量=sessionStroage.getItem(key).

清除数据:sessionStorage.clear().

(2)localStorage.不同于sessionStorage，localStorage将数据保存在客户端本地的硬件设备中，通常是硬盘，即使关闭了浏览器，该数据依然存在，下次访问的时候仍然可以继续使用.具体为:

保存数据:localStorage.setItem(key，value).

读取数据:变量=localStorage.getItem(key).

清除数据:localStorage.clear().

需说明的是，以上2种方式在保存数据时均采用按键名/键值的形式，保存后可以修改键值，但不允许修改键名.为了避免保存时使用到重复的键名，可以使用当前日期和时间作为键名来保存，其JavaScript代码为:

2.2 离线存储

目前，Web应用程序已经变得越来越成熟了，有时仅通过Web Storage存储一些基本数据显然不能满足用户的需求.为了让整个应用程序在没有网络的状态下也能正常工作，就必须把构成该应用的Flash、图片、CSS、HTML、JS等大量文件存放在本地存储中.此时，即便计算机没有与网络连接，也可以通过本地的资源文件来运行该Web应用程序.

Web应用程序的本地缓存是通过页面的Manifest文件来管理的.Manifest是一个位于Web服务器上的文件，它以清单的形式展示了需要缓存和不需要缓存的文件.Manifest文件的示例为:

在Manifest文件中，第一行必须是CACHE MAINFEST，它的作用是告知浏览器，此时需要对资源文件进行缓存处理操作.

一般地，缓存处理操作分为以下3种:

(1)CACHE.该类别指定了需要被缓存到本地的资源文件，其为可选项.

(2)FALLBACK.该类别每行具有2个指定的文件，当有网络的情况下访问第一个资源文件，当没有网络的情况下访问第二个资源文件，其为可选项.

(3)NETWORK.该类别下的文件是不需要被缓存到本地的，这些文件必须在有网络的情况下才被使用到，其为可选项.

通常，可以为每一个页面文件单独指定一个Manifest文件，也可以仅对整个应用指定一个Manifest文件，具体步骤为:

需要说明的是，在使用Manifest文件时，要对服务器进行设置，让所运行的服务器支持text/cachemanifest这个类型，不同的服务器具体的设置有所区别.

2.3 Web数据库

对于简单的数据存储，sessionStorage和 localStorage能够很好地完成，但对琐碎的关系型数据进行处理时，其就无能为力了.此时，Web数据库可以很好地解决问题.

在HTML 4中，数据库只能放在服务器端，客户端只能通过发送请求的方式获取到远程数据，而在HTML 5中，内置了一个可以通过SQL语法来访问的数据库，其具体步骤是:

(1)通过JavaScript脚本创建访问数据库的对象:var db=openDatabase(‘dbname’，‘1.0.0’，‘DB Info’，‘200000’)，第一个参数是数据库的名字，第二个参数是版本编号，第三个参数是描述信息，第四个参数是数据库的大小.

(2)通过SQL语法进行数据操作.在实际操作时，需要调用transaction方法，其方法是，

需要注意的是，函数具有一个事务类型的参数(tx)，该事务参数具有一个函数executeSql()，包含SQL操作语句、相应的数据与时间、一个成功时执行的函数和一个失败时执行的函数.

3 各浏览器兼容性

由于HTML 5的技术标准才制订不久，加之浏览器各版本的历史原因，各浏览器厂商还没有完全兼容HTML 5的所有标准.各浏览器对本地存储的支持度如表1所示.

表1 各浏览器对本地存储的支持度

由表1可知，Firefox，Safari，Chrome，Opera浏览器对新型前端本地化存储有相当好的兼容性处理，而IE家族相对落后，但随着Windows 7及IE高版本浏览器的普及，相信在不久的将来，HTML 5技术标准支持的本地化存储技术将得到更广泛的应用.

4 结论

HTML 5将成为新一代浏览器的技术标准，它在给新的Web应用程序带来无限可能性的同时，还能带来更快、更好、更炫的用户体验.HTML 5的本地化存储技术，通过添加更多功能将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻了服务器端的负担.相信随着网络技术的进步，Web应用将重新回到“客户端为重、服务器端为轻”的模式下.

［1］马新强，孙兆，袁哲，等.Web标准与HTML 5的核心技术研究［J］.重庆文理学院学报，2010，29(6):61－64.

［2］黄敏，张卫东，李众立.Web缓存技术的应用与研究［J］.计算机工程与设计，2003，24(5):33－35.

［3］刘彤，周工业，倪浆铭.HTML浏览器的设计与分析［J］.计算机工程与应用，2001，38(9):117－119.

［4］王明超，陈榕.基于脚本的客户端软件结构化存储技术研究［J］.计算机技术与发展，2010，20(2):25－28.

［5］Stephen C.Browser War Centers on Once-obscure JavaScript［EB/OL］.［2009－03－20］.http://news.cnet.corn/browser-war-centers-on·once-obscure-javascript/es/79891.htm.

［6］熊忠阳，张玉芳，吴中福.三层结构中的数据库访问技术［J］.计算机科学，2000，27(4):95－97.