本文将HTML 5中几种用于在客户端本地保存数据的API进行比较，这些API包括Web Storage API，Web SQL Database API，Indexed Database API与FileSystem API。这几种API的作用均为将数据保存在客户端本地。在一个现代Web应用程序中,有两个原因需要将数据保存在客户端本地：(1)为了使Web应用程序可以离线访问;(2)为了提高应用程序的性能。
        首先,我们介绍这些API之间的一些共同之处。
共同特性
存储数据在客户端本地
        首先,这几个API的作用均为在客户端本地存储一些数据。在有些API中,你也可以执行数据的搜索操作与批量追加及批量更新操作。
单源绑定
        在使用这几个API时,本地数据均被绑定到单个源中。例如,在//abc.example.com站点中保存的数据将只允许被//abc.example.com站点访问,不允许被//def.example.com站点与//abc.example.com:8081站点所访问。
磁盘限额
        可以想象,如果任何站点都被允许在客户端本地保存几个或几十个G的数据,对客户端本地的磁盘来说将是一场灾难。因此,浏览器将对客户端存储区的可存储容量强加一个限制。当应用程序所保存的数据容量超过该限制时,浏览器将向用户显示一个提示框,询问用户是否增加容量限制。你可能会认为浏览器应该对WebStorage、Web SQL数据库、indexedDB数据库等存储区统一指定一个容量限制,但实际上,各主流浏览器均对各存储区单独指定不同的容量限制。例如,//abc.example.com站点被允许在WebStorage中存储5MB数据,在Web SQL数据库中存储25MB数据,不允许在indexedDB数据库中存储任何数据。另外,可以在应用程序的某个界面中显示用户在各存储区中允许保存多大容量的数据,已经保存多大容量的数据。用户也可以在该界面中修改各存储区的容量限制。
事务
        在Web SQL数据库与indexedDB数据库中,均支持事务的使用。该事务的作用与服务器端使用的各种关系型数据库中的事务的作用相同,都是为了确保数据的完整性与准确性。
同步与异步模式
        除了WebStorage API之外,其他几种本地存储API均支持同步模式与异步模式。同步模式是阻塞型的,当执行JavaScript脚本代码中在客户端本地保存数据的语句时,在数据被存储完成之前,下一句语句将不会被执行。而异步模式将首先为数据存储操作新建一个线程,然后立即执行下一句语句。当数据存储操作结束时可以通过回调函数通知应用程序数据存储操作已完成,并且执行之后的后续处理(必须事先定义回调函数,并且在回调函数中指定数据存储操作结束后所需执行的处理)。
        在数据存储量不大,所需时间不长的场合中,可以使用同步模式,因为使用该模式时编程方法比较简单。但是在存储量较大或所需时间较长的场合中,如果使用同步模式,数据存储操作将会阻塞主线程,阻塞用户在界面上所执行的操作。这意味着用户的鼠标操作或键盘操作将在短时间内得不到用户界面的任何反应。所以在这种场合下,应该使用异步模式,或者,可以通过Web Workers API将数据存储操作放在一个后台线程中单独执行(在后台线程中只能使用同步模式)。
几种API之间的比较
WebStorage
        在HTML 5中,WebStorage在大多数时候是指一种被称为localStorage的对象。你可以通过locaStorage.foo="bar"语句将数据长期保存在localStorage(可以被理解为客户端本地的一个存储区)中,当浏览器被关闭后再被打开时,可以通过访问localStorage.foo属性值获取之前被保存在localStorage中的数据。在HTML 5中的WebStorage API中,可以使用两种用于存储数据的对象,一种为localStorage对象,另一种为sessionStorage对象,当使用sessionStorage对象时,当浏览器被关闭后,就不能再获取被保存在sessionStorage存储区中的数据。
        WebStorage的优点与缺陷如下所示：
优点:
被所有主流浏览器支持,被iOS操作系统与Android操作系统支持。
属于一种简单API,容易学习。
属于同步API,编程方法简单。
被保存的数据可以立即被其他浏览器标签窗口所访问。
缺陷:
因为WebStorage API属于一种同步API,所以在保存大数据量或保存对象时的性能不高。
因为缺乏索引,所以在针对大数据量或对象进行搜索时的性能不高。
因为目前主流浏览器均只支持在WebStorage中存储字符串数据,所以当保存对象时必须先将其转换为JSON字符串后进行保存,当获取对象时必须先将取出的字符串后将其还原为对象,所以导致针对对象进行存取操作时的性能不高。
Web SQL数据库
        Web SQL数据库是一种基本拥有服务器端关系型SQL数据库的大部分功能的客户端本地据库。该数据库支持索引的使用,因此在搜索数据时拥有更高的性能,支持事务的使用,因此可以更好地确保数据的完整性与准确性。
Web SQL数据库的优点与缺陷如下所示：
优点:
被Chrome浏览器、Safari浏览器与Opera浏览器支持,被iOS操作系统与Android操作系统支持。
属于可使用异步模式与在后台线程中使用同步模式的API,保存数据时不会阻塞用户在界面上的任何操作。
支持索引的使用,搜索数据时拥有较高的性能。
支持事务的使用,可以更好地确保数据的完整性与准确性。
使用严密的数据结构,易于维护数据的完整性与准确性。
缺陷:
在IE浏览器与Firefox浏览器中不被支持。
要求在学习前首先掌握关系型数据库的有关知识与SQL语句的使用方法。
在使用前首先需要定义数据表结构,缺乏灵活性。
IndexedDB数据库
        因为Web Storage与Web SQL数据库各自都拥有一些优点与缺陷,所以在HTM 5中新增IndexedDB数据库,目的是结合两者的长处,克服两者的缺陷。
        IndexedDB数据库可以被理解为一个对象仓库的集合,你可以将对象存储在该数据库中的某一个对象仓库中。对象仓库有些类似于关系型数据库中的数据表,但是对象仓库中被存储的均为对象,所以不受数据结构的限制,不需要预先定义对象仓库的结构。可以在应用程序中使用任意数量的IndexedDB数据库,在每一个数据库中定义任意数量的对象仓库。但是与Web Storage不同的是,IndexedDB数据库拥有一些性能上的优势,你可以在对象仓库中通过创建索引来提高搜索数据时的性能,也可以通过事务的使用来确保数据的完整性与准确性。
优点:
属于可使用异步模式与在后台线程中使用同步模式的API,保存数据时不会阻塞用户在界面上的操作。
支持索引的使用,搜索数据时拥有较高的性能。
 支持事务的使用,可以更好地确保数据的完整性与准确性。
使用灵活的数据结构,不需要预先定义对象仓库的结构。
易于学习,不需要预先掌握其他数据库的有关知识。
目前为止被Chrome浏览器、Firefox浏览器与IE10浏览器所支持。
缺陷:
学习难度比Web Storage API与Web SQL数据库API更高一些。
因为使用灵活的数据结构,所以需要开发者在存储数据时确保数据的准确性与连续性。
文件系统
        前面所述的几个API均适用于在客户端本地保存文本数据或对象,但是当需要在客户端本地保存文件或原始二进制数据流时,我们需要使用HTML 5中新增的FileSystem API。该API为我们提供一个完整的具有阶层目录结构的文件系统,可用于将文件保存在客户端本地。另外,该API可结合HTM 5中的File Reader API与File Writer API一起使用。在HTML 5中,可通过File Reader API读取文件中的内容,通过File Writer API向文件中写入内容。
优点:
可用于在客户端本地存储大数据量文本文件与图像文件、音频文件、视频文件与PDF文件等二进制文件。
属于可使用异步模式与在后台线程中使用同步模式的API,保存数据时不会阻塞用户在界面上的操作,同时拥有较高的性能。
缺陷:
目前为止只受到Chrome浏览器的支持。
不支持索引与事务的使用。

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！