HTML5 IndexDB 用户本地化存储离线数据库的使用

HTML5 IndexDB 用户本地化存储离线数据库的使用

了解的朋友，知道Web SQL曾是HTML5 离线数据存储的一种解决方案，它是一个基于SQLite 的离线数据库。但W3C 的 WebDatabase 规范最终选择主推IndexDB，对Web SQL则不再提供维护。

IndexDB是一个NoSQL类型的数据库，可在客户端进行大量结构化数据存储，能使用索引高效率搜索数据进行读写和管理操作。而且它的大多操作都是在异步模式下执行，能够让你使用高效的JavaScript事件驱动模块，减少等待，操作更加流畅。它也有为同步模式提供的API，但在碧海情天整理资料的时候据说还没有实现。

IndexedDB概述

1. IndexedDB存储形式为键值对：它可以存储一些复杂的对象，而键可以存储这些对象的属性值，并且可以使用索引对对象的属性进行快速检索。
2. IndexedDB建立在交互数据库模型的基础上：任何对IndexedDB的操作都发生一个交互操作（transaction，事务），如它提供的索引、表、游标等均与一个transaction关联，它定义了交互的生存时间与结束时抛出的事件，这样能很好的处理web程序在不同的tab窗口中实例的互操作。
3. IndexedDB的API大多是异步的：你可以向数据库发出操作的“请求”，当操作完成时会产生一个DOM事件，通过事件的类型会知道操作是否成功。
4. IndexedDB使用“请求”机制：操作对象会接收到DOM的success和failure事件，它也有相应的onsuccess和onerror的属性；对象还有readyState、result和errorCode属性来查看当前“请求”的状态，而result属性则根据不同的“请求”返回不同的结果。
5. IndexedDB 使用DOM事件机制来处理“请求”的结果：DOM事件的type属性提示操作是否成功，target属性指向发生“请求”的对象（大多数情况下是IDBRequest对象）。
6. IndexedDB工作基本流程：
    1. 创建一个交互操作对象
    2. 发送操作“请求”
    3. 通过监听DOM事件等待操作完成
    4. 处理“请求”结果

IndexedDB具体使用方法

1. 初始化声明

var dbName = "赵亮"; //数据库名称
var dbVersion = 2.0; //数据库版本
var tablename = "碧海情天"; //表名

2. 初始并实例化IndexDB数据上下文

//定义一个IndexDB方法集合对象
var H5AppDB = {};
//实例化IndexDB数据上下文，这边根据浏览器类型来做选择
var indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB;
if ('webkitIndexedDB' in window) {
    window.IDBTransaction = window.webkitIDBTransaction;
    window.IDBKeyRange = window.webkitIDBKeyRange;
}
H5AppDB.indexedDB = {};
H5AppDB.indexedDB.db = null;
//错误信息，打印日志