這篇文章會接著介紹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的官方文檔 中繼續研究和探索。

IndexedDB技術簡介(四)