如何解决IndexedDB在webkit内核下新旧版本的兼容问题

这篇文章会接着介绍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;  
    windowwindow.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;  
    windowwindow.IDBTransaction = window.webkitIDBTransaction;  
}  
else if ('mozIndexedDB' in window) {  
    window.indexedDB = mozIndexedDB;  
}  
else if ('msIndexedDB' in window) {  
    window.indexedDB = msIndexedDB;  
}