IndexedDB技术简介(四)

本文摘自 勾三股四 更早时期的 不老歌 博客。

---

这篇文章会接着介绍IndexedDB(以下简称IDB)。我们会介绍如何解决在webkit内核下、新旧版本规范的兼容问题。

目前支持IDB的webkit内核浏览器有chrome和傲游3，safari暂不支持IDB。

首先，由于内核不同，所以window.indexedDB被改为了带有webkit前缀的变量window.webkitIndexedDB。同时发生变化的还有两个对象IDBKeyRange和IDBTransaction。如果想兼容gecko和webkit内核，那么可以在程序的开头加入如下代码：

if ('webkitIndexedDB' in window) {
    window.indexedDB = webkitIndexedDB;
    window.IDBKeyRange = webkitIDBKeyRange;
    window.IDBTransaction = window.webkitIDBTransaction;
}
else if ('mozIndexedDB' in window) {
    window.indexedDB = mozIndexedDB;
}

其次，webkit内核(chrome17或傲游3.3)和Firefox9及其更旧的版本遵循的IDB规范已经是旧版本的规范了，而Firefox10已经遵循的是新版本IDB规范。两者的主要区别在于版本控制的方式不同。旧版中的版本变更方式是：

var req = window.indexedDB.open(dbName); // 旧版在这里不需要写明dbVersion
req.onsuccess = function (e) {
    var db = this.result;
    if (db.version != '1.0') {
        var subReq = db.setVersion('1.0'); // 通过setVersion修改版本号，而不是onupgradeneeded事件
        subReq.onsuccess = function (e) {
            // TODO: real success code
        };
    }
    else {
        // TODO: real success code
    }
};

除了上述的两点不同，新旧两版的接口设计基本上是相同的。
规范的频繁变更确实不是我们希望看到的，在IDB尚未被广泛应用时做出改变，或许影响面还不算太大。但如果我们希望通过一套代码兼容新旧两版规范，还是有办法的。

var req = window.indexedDB.open(dbName, dbVersion); // 对于旧版而言，会忽略第二个参数，因此这里可以兼容
req.onsuccess = function (e) {
    var db = this.result;
    if (db.version != dbVersion) { // 新版中两者绝对一致，否则只会触发onupgradeneeded事件，因此这里也可以兼容
        // TODO: code of changing object stores for new version
        var subReq = db.setVersion(dbVersion);
        subReq.onsuccess = function (e) {
            // TODO: real success code
        };
    }
    else {
        // TODO: real success code
    }
};
req.onupgradeneeded = function (e) {
    // TODO: code of changing object stores for new version
};

---------------- 兼容IE的分割线 ---------------

这里额外插入一段如何兼容IE10的说明，IE10最新的预览版也已经支持了IndexedDB，和window.webkitIndexedDB和window.mozIndexedDB类似，IE10中对应的变量名为window.msIndexedDB，所以，相兼容IE，把上面第一部分的代码改为：

if ('webkitIndexedDB' in window) {
    window.indexedDB = webkitIndexedDB;
    window.IDBKeyRange = webkitIDBKeyRange;
    window.IDBTransaction = window.webkitIDBTransaction;
}
else if ('mozIndexedDB' in window) {
    window.indexedDB = mozIndexedDB;
}
else if ('msIndexedDB' in window) {
    window.indexedDB = msIndexedDB;
}

即可。下面的“全兼容”的例子已经用到了这段代码。

---------------- 兼容IE的分割线 ---------------

这样，我们就完成了不同内核不同版本下的“全兼容”。
还记得上一篇文章中的demo吗？我通过上面的兼容方法，对这个例子做了进一步的兼容性处理和接口封装，得到了另一个demo：

DEMO演示链接 (firefox/chrome/maxthon)

至此，IndexedDB技术介绍告一段落。我们先后介绍了基本原理、接口定义、并通过一个简单的例子，进行了gecko/webkit内核下的新旧规范的兼容和适配，希望诸位看过之后有所收获。IndexedDB的用途和用法还有很多，在此不一一列举，大家可以在W3C的官方文档中继续研究和探索。

完