IndexedDB 是一種低級(jí)API，用于客戶端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)(包括, 文件/ blobs)。下面通過(guò)本文重點(diǎn)給大家介紹HTML5本地存儲(chǔ)之IndexedDB的相關(guān)知識(shí)，感興趣的朋友一起看看吧

IndexedDB 是一種低級(jí)API，用于客戶端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)(包括, 文件/ blobs)。該API使用索引來(lái)實(shí)現(xiàn)對(duì)該數(shù)據(jù)的高性能搜索。

最近有一項(xiàng)業(yè)務(wù)需求，就是可以離線存儲(chǔ)數(shù)據(jù)，等到有網(wǎng)絡(luò)信號(hào)的時(shí)候可以上傳表單和圖片。所以研究了一下HTML5的IndexedDB。

對(duì)于只存儲(chǔ)某些字段的需求來(lái)說(shuō)，可以使用Local Storage和 Session Storage來(lái)完成。但是一旦存儲(chǔ)大量的數(shù)據(jù)，Local Storage和 Session Storage就遠(yuǎn)遠(yuǎn)不能滿足需求了。這時(shí)，IndexedDB的強(qiáng)大之處就會(huì)體現(xiàn)出來(lái)了。

1、創(chuàng)建或者打開數(shù)據(jù)庫(kù)

/* 對(duì)不同瀏覽器的indexedDB進(jìn)行兼容 */const indexeddb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;/* 創(chuàng)建或連接數(shù)據(jù)庫(kù) */const request = indexeddb.open(name, version); // name：數(shù)據(jù)庫(kù)名，version：數(shù)據(jù)庫(kù)版本號(hào)

因?yàn)閕ndexedDB在不同的瀏覽器上有兼容性，所以我們需要些一個(gè)兼容函數(shù)來(lái)兼容indexedDB。

2、連接到數(shù)據(jù)庫(kù)的回調(diào)函數(shù)

request.addEventListener( success , function(event){  // 打開或創(chuàng)建數(shù)據(jù)庫(kù)成功}, false);request.addEventListener( error , function(event){  // 打開或創(chuàng)建數(shù)據(jù)庫(kù)失敗}, false);request.addEventListener( upgradeneeded , function(event){  // 更新數(shù)據(jù)庫(kù)時(shí)執(zhí)行}, false);

在連接到數(shù)據(jù)庫(kù)后，request會(huì)監(jiān)聽三種狀態(tài)：

success：打開或創(chuàng)建數(shù)據(jù)庫(kù)成功

error：打開或創(chuàng)建數(shù)據(jù)庫(kù)失敗

upgradeneeded：更新數(shù)據(jù)庫(kù)

upgradeneeded狀態(tài)是在indexedDB創(chuàng)建新的數(shù)據(jù)庫(kù)時(shí)和indexeddb.open(name, version) version（數(shù)據(jù)庫(kù)版本號(hào)）發(fā)生變化時(shí)才能監(jiān)聽到此狀態(tài)。當(dāng)版本號(hào)不發(fā)生變化時(shí)，不會(huì)觸發(fā)此狀態(tài)。數(shù)據(jù)庫(kù)的ObjectStore的創(chuàng)建、刪除等都是在這個(gè)監(jiān)聽事件下執(zhí)行的。

3、創(chuàng)建、刪除ObjectStore

在indexedDB中，ObjectStore類似于數(shù)據(jù)庫(kù)的表。

request.addEventListener( upgradeneeded , function(event){  // 創(chuàng)建數(shù)據(jù)庫(kù)實(shí)例 const db = event.target.result; // 關(guān)閉數(shù)據(jù)庫(kù) db.close(); // 判斷是否有ObjectStore db.objectStoreNames.contains(objectStoreName); // 刪除ObjectStore db.deleteObjectStore(objectStoreName);}, false);

可以用如下方法創(chuàng)建一個(gè)ObjectStore

request.addEventListener( upgradeneeded , function(event){  // 創(chuàng)建數(shù)據(jù)庫(kù)實(shí)例 const db = event.target.result; // 判斷是否有ObjectStore if(!db.objectStoreNames.contains(objectStoreName)){ const store = db.createObjectStore(objectStoreName, { keyPath: keyPath // keyPath 作為ObjectStore的搜索關(guān)鍵字 // 為ObjectStore創(chuàng)造索引 store.createIndex(name, // 索引 index, // 鍵值 unique: unique // 索引是否唯一}, false);

4、數(shù)據(jù)的增刪改查

request.addEventListener( success , function(event){  // 創(chuàng)建數(shù)據(jù)庫(kù)實(shí)例 const db = event.target.result; // 查找一個(gè)ObjectStore db.transaction(objectStoreName, wa); // wa為 readwrite 時(shí)，數(shù)據(jù)可以讀寫  // wa為 readonly 時(shí)，數(shù)據(jù)只讀 const store = transaction.objectStore(objectStoreName);}, false);

數(shù)據(jù)庫(kù)的增刪改查：

// 添加數(shù)據(jù)，當(dāng)關(guān)鍵字存在時(shí)數(shù)據(jù)不會(huì)添加store.add(obj);// 更新數(shù)據(jù)，當(dāng)關(guān)鍵字存在時(shí)覆蓋數(shù)據(jù)，不存在時(shí)會(huì)添加數(shù)據(jù)store.put(obj);// 刪除數(shù)據(jù)，刪除指定的關(guān)鍵字對(duì)應(yīng)的數(shù)據(jù)store.delete(html' target='_blank'>value);// 清除ObjectStorestore.clear();// 查找數(shù)據(jù)，根據(jù)關(guān)鍵字查找指定的數(shù)據(jù)const g = store.get(value);g.addEventListener( success , function(event){ // 異步查找后的回調(diào)函數(shù)}, false);

按索引查找數(shù)據(jù)

const index = store.index(indexName);const cursor = index.openCursor(range);cursor.addEventListener( success , function(event){ const result = event.target.result; if(result){ result.value // 數(shù)據(jù) result.continue(); // 迭代，游標(biāo)下移}, false);

按索引的范圍查找數(shù)據(jù)

const index = store.index(indexName);const cursor = index.openCursor(range); * range為null時(shí)，查找所有數(shù)據(jù) * range為指定值時(shí)，查找索引滿足該條件的對(duì)應(yīng)的數(shù)據(jù) * range為IDBKeyRange對(duì)象時(shí)，根據(jù)條件查找滿足條件的指定范圍的數(shù)據(jù)// 大于或大于等于 range = IDBKeyRange.lowerBound(value, true) // (value, +∞)， valuerange = IDBKeyRange.lowerBound(value, false) // [value, +∞)， = value// 小于或小于等于，isOpen：true，開區(qū)間；false，閉區(qū)間range = IDBKeyRange.upperBound(value, isOpen)// 大于或大于等于value1，小于或小于等于value2IDBKeyRange.bound(value1, value2, isOpen1, isOpen2)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP ！

相關(guān)推薦：

前端HTML5的幾種存儲(chǔ)方式

H5 活動(dòng)頁(yè)之移動(dòng)端 REM 布局適配方法的分析

H5橫豎屏檢測(cè)的方法

以上就是HTML5的本地存儲(chǔ)IndexedDB的詳細(xì)內(nèi)容，其它編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。