为了实现离线存储功能，HTML5提供了Web存储相关的API，即WebStorage。WebStorage包括LocalStorage和SessionStorage两部分，可用于对离线数据的短暂性或永久性存储。另外，HTML5另外还提供了一套基于关系型的数据库WebSQLDatabase，可以支持页面上复杂数据的离线存储，例如可以存储用户电子邮件信息、消费账务流水信息等，同时WebSQLDatabase还加入了传统数据库的事务概念，使得多窗口操作可以保持数据一致性。
WebSQLDatabase数据库是基于SQLite开发的，与WebStorage中的LocalStorage相同。最后一个也是最为强大的功能即IndexedDB。IndexedDB是HTML5推出的一种轻量级的NoSQL数据库，即常说的非关系型数据库。与传统的关系型数据库相比，NoSQL数据库具有易扩展、快速读写、成本低廉等特点，HTML5的IndexedDB同时还包含了常见的数据库构造，如事务、索引、游标等，在API的使用上分为同步和异步两种形态。下面通过一个简单的示例介绍IndexedDB的使用，代码如下：
【代码5-1】
01 <! DOCTYPE html> 02 < html> 03 < body></ body> 04 < script type=" text/ javascript"> 05 var request = indexedDB. open(' Html5IndexedDB', 2); // 创建 一个 数据库 06 request. onerror = function( e) { console. log( e); }; // 监听 错误 事件 07 request. onupgradeneeded = function( event) { //
监听 事务 事件 08 var db = event. target. result; // 获取 数据库 对象 09 var objectStore = db. createObjectStore(" users", { keyPath: "html5" }); // 创建 对象 存储 空间 存放 用户 信息 10 objectStore. createIndex(" name", "name", { unique: false }); // 创建 索引 来 通过 name 搜索 客户 11 objectStore. createIndex(" id", "id", { unique: true }); // 创建 索引 来 通过 email 搜索 客户 12 objectStore. add({ html5:' 1' ,name : ' 小 王 ' , sex :' 女 ', id:' 3323' ,age: 23}); // 存入 一条 用户 信息 数据 13 }; 14 </ script> 15 </ html>
