IndexedDB技术简介(四)

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

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

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

首先,由于内核不同,所以window.indexedDB被改为了带有webkit前缀的变量window.webkitIndexedDB。同时发生变化的还有两个对象IDBKeyRangeIDBTransaction。如果想兼容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.webkitIndexedDBwindow.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的官方文档中继续研究和探索。

向本文提出修改或勘误建议