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

数据库 其他数据库
这篇文章会接着介绍IndexedDB(以下简称IDB)。我们会介绍如何解决在webkit内核下、新旧版本规范的兼容问题。目前支持IDB的webkit内核浏览器有chrome和傲游3,safari暂不支持IDB。

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

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

首先,由于内核不同,所以window.indexedDB被改为了带有webkit前缀的变量window.webkitIndexedDB。同时发生变化的还有两个对象IDBKeyRange和IDBTransaction。如果想兼容gecko和webkit内核,那么可以在程序的开头加入如下代码:

  1. if ('webkitIndexedDB' in window) {  
  2.     window.indexedDB = webkitIndexedDB;  
  3.     window.IDBKeyRange = webkitIDBKeyRange;  
  4.     windowwindow.IDBTransaction = window.webkitIDBTransaction;  
  5. }  
  6. else if ('mozIndexedDB' in window) {  
  7.     window.indexedDB = mozIndexedDB;  

其次,webkit内核(chrome17或傲游3.3)和Firefox9及其更旧的版本遵循的IDB规范已经是旧版本的规范了,而Firefox10已经遵循的是新版本IDB规范。两者的主要区别在于版本控制的方式不同。旧版中的版本变更方式是:

  1. var req = window.indexedDB.open(dbName); // 旧版在这里不需要写明dbVersion  
  2. req.onsuccess = function (e) {  
  3.     var db = this.result;  
  4.     if (db.version != '1.0') {  
  5.         var subReq = db.setVersion('1.0'); // 通过setVersion修改版本号,而不是onupgradeneeded事件  
  6.         subReq.onsuccess = function (e) {  
  7.             // TODO: real success code  
  8.         };  
  9.     }  
  10.     else {  
  11.         // TODO: real success code  
  12.     }  
  13. }; 

除了上述的两点不同,新旧两版的接口设计基本上是相同的。

规范的频繁变更确实不是我们希望看到的,在IDB尚未被广泛应用时做出改变,或许影响面还不算太大。但如果我们希望通过一套代码兼容新旧两版规范,还是有办法的。

  1. var req = window.indexedDB.open(dbName, dbVersion); // 对于旧版而言,会忽略第二个参数,因此这里可以兼容  
  2. req.onsuccess = function (e) {  
  3.     var db = this.result;  
  4.     if (db.version != dbVersion) { // 新版中两者绝对一致,否则只会触发onupgradeneeded事件,因此这里也可以兼容  
  5.         // TODO: code of changing object stores for new version  
  6.         var subReq = db.setVersion(dbVersion);  
  7.         subReq.onsuccess = function (e) {  
  8.             // TODO: real success code  
  9.         };  
  10.     }  
  11.     else {  
  12.         // TODO: real success code  
  13.     }  
  14. };  
  15. req.onupgradeneeded = function (e) {  
  16.     // TODO: code of changing object stores for new version  
  17. }; 

---------------- 兼容IE的分割线 ---------------

这里额外插入一段如何兼容IE10的说明,IE10***的预览版也已经支持了IndexedDB,和window.webkitIndexedDB和window.mozIndexedDB类似,IE10中对应的变量名为window.msIndexedDB,所以,相兼容IE,把上面***部分的代码改为:

  1. if ('webkitIndexedDB' in window) {  
  2.     window.indexedDB = webkitIndexedDB;  
  3.     window.IDBKeyRange = webkitIDBKeyRange;  
  4.     windowwindow.IDBTransaction = window.webkitIDBTransaction;  
  5. }  
  6. else if ('mozIndexedDB' in window) {  
  7.     window.indexedDB = mozIndexedDB;  
  8. }  
  9. else if ('msIndexedDB' in window) {  
  10.     window.indexedDB = msIndexedDB;  

即可。下面的“全兼容”的例子已经用到了这段代码。

---------------- 兼容IE的分割线 ---------------

这样,我们就完成了不同内核不同版本下的“全兼容”。

还记得上一篇文章中的demo吗?我通过上面的兼容方法,对这个例子做了进一步的兼容性处理和接口封装,得到了另一个demo:

DEMO演示链接 (firefox/chrome/maxthon)

至此,IndexedDB技术介绍告一段落。我们先后介绍了基本原理接口定义、并通过一个简单的例子,进行了gecko/webkit内核下的新旧规范的兼容和适配,希望诸位看过之后有所收获。IndexedDB的用途和用法还有很多,在此不一一列举,大家可以在W3C的官方文档中继续研究和探索。

【系列文章】

  1. IndexedDB的JS接口设计详解
  2. 浅析IndexedDB存数结构
  3. 调试IndexedDB应用程序
  4. 基于Firefox 10的IndexedDB实例演示

原文:http://bulaoge.net/user.blg?dmn=g3g4&cid=90094

责任编辑:陈贻新 来源: 赵锦江的博客
相关推荐

2009-12-31 15:08:22

Silverlight

2010-05-28 11:14:38

2010-09-15 09:43:24

Javascript浏览器兼容

2010-08-11 13:35:10

JavaScriptCSS

2009-12-23 08:49:21

Windows 7UAC兼容性

2009-04-02 18:06:27

Vmwareesx虚拟化

2013-03-18 14:00:57

高德央视315

2010-09-02 09:21:45

CSS兼容

2010-10-09 13:07:51

Javascript兼容

2010-12-27 09:46:16

Windows 7IE8兼容

2010-09-16 13:48:15

CSS Hack

2010-09-01 15:16:47

CSSIEFirefox

2013-05-24 13:21:23

jQuery

2016-09-18 20:48:21

苹果safari浏览器

2023-05-30 08:03:05

Windows 11AMD 驱动

2010-08-30 15:40:31

CSS浏览器兼容

2021-10-21 06:21:16

兼容性

2013-09-09 16:46:38

Webkit内核

2011-03-28 16:49:47

SQL Server Vista

2010-08-17 15:33:28

CSS兼容IE7IE8
点赞
收藏

51CTO技术栈公众号