亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

IndexedDB技術簡介(四)

系統 2147 0

這篇文章會接著介紹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的官方文檔 中繼續研究和探索。

IndexedDB技術簡介(四)


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 中文字幕在线精品视频万部 | 一级女毛片 | 成人a视频片在线观看免费 成人a视频在线观看 | 成人中文字幕一区二区三区 | 伊人精品影院一本到欧美 | 国产欧美日韩图片一区二区 | 国产精品久久久久天天影视 | 国产精品视频免费看 | 欧美日韩另类综合 | 免费aⅴ在线 | 深夜影院在线 | 成人99国产精品一级毛片 | 欧美日韩99 | 日韩欧美一区二区久久 | 久久影视免费体验区午夜啪啪 | 午夜精品久久久 | 欧美激情aa毛片 | 精品国产96亚洲一区二区三区 | 香蕉视频在线观看网站 | 久久成人国产精品二三区 | 91精品在线免费 | 国产综合欧美 | 国产亚洲精品九九久在线观看 | 最新av| 九九九| 色姑娘综合网 | 香蕉视频网站在线观看 | 久久久在线视频 | 亚洲桃色视频 | 青青青青青国产免费观看 | 久久99久久99精品免观看不卡 | 91精品推荐| 九九热视 | 国产香蕉久久 | 国产精品午夜免费福利视频 | 亚州毛片 | 在线观看三级拍拍视频 | 欧美日韩亚洲综合 | 欧美成人午夜视频在线观看 | 天天操91| 成人国产午夜在线视频 |