这篇文章会接着介绍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;
- }
即可。下面的“全兼容”的例子已经用到了这段代码。
---------------- 兼容IE的分割线 ---------------
这样，我们就完成了不同内核不同版本下的“全兼容”。
还记得上一篇文章中的demo吗?我通过上面的兼容方法，对这个例子做了进一步的兼容性处理和接口封装，得到了另一个demo：
DEMO演示链接 (firefox/chrome/maxthon)
至此，IndexedDB技术介绍告一段落。我们先后介绍了基本原理、接口定义、并通过一个简单的例子，进行了gecko/webkit内核下的新旧规范的兼容和适配，希望诸位看过之后有所收获。IndexedDB的用途和用法还有很多，在此不一一列举，大家可以在W3C的官方文档中继续研究和探索。
【系列文章】
原文：http://bulaoge.net/user.blg?dmn=g3g4&cid=90094
