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

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

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

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

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

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

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

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

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

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

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

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

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

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

---------------- 兼容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

当前文章：如何解决IndexedDB在webkit内核下新旧版本的兼容问题
文章地址：http://www.mswzjz.cn/qtweb/news28/443578.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

网站维护知识

分类信息网

微信小程序　　 　乐山服务器托管　　 　成都保温材料　　 　成都西信机房　　 　清舞人间　　 　众诚伟业　　 　电商网站　　 　定制级高端网站建设　　 　app软件开发　　 　达州托管服务器　　 　成都广告设计　　 　高端网站策划　　 　模板商城网站　　 　物流公司网站建设方案　　 　关键词优化　　 　分类目录网站　　 　营销型网站建设　　 　成都营销型网站建设　　 　手机网站制作　　 　绵竹网站建设