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

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條評論
主站蜘蛛池模板: 奇米影视7777久久精品人人爽 | 国产亚洲精品看片在线观看 | 亚洲精品国产经典一区二区 | 日韩不卡一区二区三区 | 69hdxxxx中国| 青草国产精品久久久久久 | 一本大道久久香蕉成人网 | 成人免费在线视频 | 久草精品视频 | 欧美韩国日本在线 | 天天色天天操综合网 | 亚洲精品视频一区二区 | 成在线人免费视频一区二区三区 | 国产精品 视频一区 二区三区 | 午夜精品福利影院 | 中国国产一级毛片 | 男女超爽视频免费播放在线观看 | 国产精品人成人免费国产 | 亚洲看片| 国产毛片精品 | 久久精品影视 | 四虎影院在线 | 午夜国产精品影院在线观看 | 久久婷婷国产一区二区三区 | 综合精品在线 | 99re6这里只有精品视频 | 久久毛片网站 | 男人的天堂一区二区视频在线观看 | 亚洲男人的天堂久久香蕉网 | 99热在线播放 | 四虎影视免费永久在线观看黄 | 99久久精品免费看国产情侣 | 日韩欧美第一页 | 久久一本色道综合 | 国产精品二区三区 | 99在线免费观看视频 | 亚洲欧洲视频在线 | 亚洲va精品中文字幕动漫 | 国产精品亚洲一区二区三区 | 中文字幕欧美日韩va免费视频 | 国产欧美国产精品第二区 |