这篇文章会接着介绍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的官方文档
中继续研究和探索。
