web本地存储-IndexedDB

IndexedDB, HTML5中的一种数据存储方式，索引数据库。

一个网站可能有一个或多个 IndexedDB 数据库，每个数据库必须具有惟一的名称。一个数据库可包含多个对象存储，一个对象存储相当于一张表，是一个记录集合。每个记录都有一个键（key）和值（value）。
（以下所有代码及说明均针对目前最新的API规范） 

示例代码1：使用indexedDB数据库

//判断是否存在支持
if(window.indexedDB){
    //打开一个数据存储库对象请求。指定参数存储库名和版本号。
    request = indexedDB.open("db_test",1); 

    //添加监听方法: 存储库不存在时触发该方法。
    request.onupgradeneeded = function (event){
        //存储库初始化的处理. 
        //创建存储对象表和修改版本需要在此处处理
        var db = event.target.result;
    };

    //添加监听方法: 打开储存库成功后触发
    //若存在版本改变，则在onupgradeneeded之后触发
    //通过event对象参数可以得到一个Database对象实例的引用db,通过db就可以进行数据的读写操作。
    request.onsuccess = function (e){
        //请求成功后处理
        var db = e.target.result;
    }
}

一个数据库只能有一个版本号，版本号必须为长整型数据（新规范API只支持Long长整型数据），打开更高版本的数据库或者要打开的数据库本地不存在时，会触发onupgradeneeded，修改数据库和存储对象必须在此处处理。若触发onupgradeneeded则其执行完后再触发onsuccess。

示例代码2：创建存储对象及索引

var store = db.createObjectStore("tb_test",{keyPath: "name"});//创建名为tb_test的存储对象，主键key指定为name属性。
store.createIndex("by_name","name",{unique: true});//创建索引

createObjectStore(String name, optional IDBObjectStoreParameters optionalParameters)：
此操作需要versionchange的特殊事务，db必须是具有已开启此事务的Database对象。
创建一个存储对象，第一参数为存储数据的表名。第二个可选{keyPath: key} 或者 {autoIncrement: true}
1、keyPath: 指定指定每条数据存储的主键key，key必须是存储对象中的一个属性
2、autoIncrement：为true则每添加一条数据，主键key值将自增产生。
3、如果没有指定第二个参数获取指定的无效如{keyPath: null}、{autoIncrement: false}，此时在存储数据时必须手动指定主键key值得参数。

示例代码3：往存储对象中写入数据

var tx, store, index, request;
tx = db.transaction("tb_test", "readwrite");//开启一个读写事务
store = tx.objectStore("tb_test");//获取需要处理的存储对象
request = store.put({name: "test", message: "OK"});//写入数据
request.onsuccess = function (e){};//写入成功
request.onerror = function (e){};//error

示例代码4：读取存储对象中的数据

var tx, store, index, request;
tx = db.transaction("tb_test", "readonly");//开启一个只读事务
store = tx.objectStore("tb_test");//获取需要处理的存储对象
index = store.index("by_name");//获取一个索引
request = index.get("test");//使用索引获取"test"对象的值
request.onsuccess = function (e){
    var matching = e.target.result, v = matching;
    console.log(v);// -->{name: "test", message: "OK"}
};
request.onerror = function (e){
    console.log(e.message);
};

兼容性：

indexedDB也存在很多兼容性问题，新旧版本规范和不同核心浏览器间均存在部分差异。
1、全局变量indexedDB差异：
webkitIndexedDB（webkit核心） mozIndexedDB（Gecko核心） msIndexedDB（IE核心）
目前主流的大部分最新版本浏览器同时存在indexedDB变量。
另外IDBTransaction和IDBKeyRange类似情况。
为兼容性考虑需在代码前加：

window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;

2、open方法参数目前新的规范与较老的略有不同,主要是第二个参数。具体可查阅W3C网站,个人感觉不太重要， 建议直接指定一个整数值得版本号即可。
3、onupgradeneeded方法:
较老版规范中是没有这个事件方法的，open方法中是没有对应版本号的参数的，因此在这种老版规范的浏览器中，是直接触发onsuccess的，相比来说，就是少了onupgradeneeded一步。这时原本onupgradeneeded中的初始化操作就没有了，因此需要另外添加处理。老版中提供了setVersion方法用于做这样的操作，通过判断打开的version与要打开的version是否相同来判定（触发过onupgradeneeded时，一定是相同的），然后处理。

1 //在onsuccess的函数代码前添加，此部分代码只有部分旧版才会执行
if(db.version != dbVersion){
    var svReq = db.setVersion(dbVersion);
    svReq.onsuccess = function (e) {
        //此时处理与onupgradeneeded中相同的初始化操作。
    };
}

4、开启transaction事务时，代表事务类型的参数值不同。
目前新版：只读 readonly, 读写 readwrite，版本改变 versionchange
旧版：IDBTransaction下存在三个常量 READ_ONLY = 0，READ_WRITE = 1，VERSION_CHANGE = 2
如果是这样的旧版，传入"readonly"这样的字符串将抛出异常，而新版若是传入对应的这种数字常量也将抛错。因此需做兼容性判断，可提前做如下定义。

var READ_ONLY = (IDBTransaction && IDBTransaction.READ_ONLY == 0) ? 0 : "readonly";
var READ_WRITE = (IDBTransaction && IDBTransaction.READ_WRITE) || "readwrite";
var VERSION_CHANGE = (IDBTransaction && IDBTransaction.VERSION_CHANGE) || "versionchange";

IndexedDB异步性：
IndexedDB基本上所有的操作都是异步性的操作，因此在应用时很多地方要特别注意。因此在函数执行结束时，IndexedDB操作可能并未完成。
案例：在存储对象初始化代码执行结束后，因为这里的事务也是异步的处理，对象存储环境可能并未完成，或者事务正在执行尚未完成。此时使用db再去做其他读写操作，就会抛出异常(A version change transaction is running.)。如何知道事务已经完成，事务中有一个oncomplete方法，当事务完成时将会触发。对初始化操作可添加修改如下(示例代码2):

var store = db.createObjectStore("tb_test",{keyPath: "name"});
store.createIndex("by_name","name",{unique: true});
store.transaction.oncomplete = function (e){
    var db = e.target.db;
    //此时事务已经完成。
};

更多信息可查阅http://www.w3.org/TR/IndexedDB/。

（第一次发文，如有错误的地方，还请多多包涵，问题建议都可提出，一定尽快回复和更新^_^）

---

 参考资料：

http://www.w3.org/TR/IndexedDB/  W3C IndexedDB Database API

http://www.ibm.com/developerworks/cn/web/wa-indexeddb/  使用HTML5 indexedDB API

http://database.51cto.com/art/201202/319551.htm  解决兼容性的部分参考