HTML5本地儲存之IndexedDB

indexeddb 是一種低階api，用於客戶端儲存大量結構化資料(包括, 檔案/ blobs)。該api使用索引來實現對該資料的高效能搜尋。

最近有一項業務需求，就是可以離線儲存資料，等到有網路訊號的時候可以上傳表單和。所以研究了一下html5的indexeddb。

對於只儲存某些欄位的需求來說，可以使用local storage和 session storage來完成。但是一旦儲存大量的資料，local storage和 session storage就遠遠不能滿足需求了。這時，indexeddb的強大之處就會體現出來了。

1、建立或者開啟資料庫

/* 對不同瀏覽器的indexeddb進行相容 */

const indexeddb = window.indexeddb || window.webkitindexeddb || window.mozindexeddb || window.msindexeddb;

/* 建立或連線資料庫 */

const request = indexeddb.open(name, version); // name：資料庫名，version：資料庫版本號

因為indexeddb在不同的瀏覽器上有相容性，所以我們需要些乙個相容函式來相容indexeddb。

2、連線到資料庫的**函式

request.addeventlistener('success', function(event), false);

request.addeventlistener('error', function(event), false);

request.addeventlistener('upgradeneeded', function(event), false);

在連線到資料庫後，request會監聽三種狀態：

upgradeneeded狀態是在indexeddb建立新的資料庫時和indexeddb.open(name, version) version（資料庫版本號）發生變化時才能監聽到此狀態。當版本號不發生變化時，不會觸發此狀態。資料庫的objectstore的建立、刪除等都是在這個監聽事件下執行的。

3、建立、刪除objectstore

在indexeddb中，objectstore類似於資料庫的表。

request.addeventlistener('upgradeneeded', function(event), false);

可以用如下方法建立乙個objectstore

request.addeventlistener('upgradeneeded', function(event));

// 為objectstore創造索引

store.createindex(name, // 索引

index, // 鍵值);}

}, false);

4、資料的增刪改查

request.addeventlistener('success', function(event), false);

資料庫的增刪改查：

// 新增資料，當關鍵字存在時資料不會新增

store.add(obj);

// 更新資料，當關鍵字存在時覆蓋資料，不存在時會新增資料

store.put(obj);

// 刪除資料，刪除指定的關鍵字對應的資料

store.delete(value);

// 清除objectstore

store.clear();

// 查詢資料，根據關鍵字查詢指定的資料

const g = store.get(value);

g.addeventlistener('success', function(event), false);

按索引查詢資料

const index = store.index(indexname);

const cursor = index.opencursor(range);

cursor.addeventlistener('success', function(event)

}, false);

按索引的範圍查詢資料

c程式設計客棧onst index = store.index(indexname);

const cursor = index.opencursor(range);

/** * range為null時，查詢所有資料

* range為指定值時，查詢索引滿足該條件的對應的資料

* range為idbkeyrange物件時，根據條件查詢滿足條件的指定範圍的資料

*/// 大於或大於等於

range = idbkeyrange.lowerbound(value, true) // (value, +∞)，> value

range = idbkeyrange.lowerbound(value, false) // [value, +∞)，>= value

// 小於或小於等於，isopen：true，開區間；false，閉區間

range = idbkeyrange.upperbound(value, isopen)

// 大於或大於等於value1，小於或小於等於value2

idbkeyrange.bound(value1, value2, isopen1, isopen2)

本文標題: html5本地儲存之indexeddb

本文位址: /web/html5/22288.html

HTML5本地儲存之IndexedDB

HTML5本地儲存

html5 本地儲存

html5 本地儲存

HTML5本地儲存之IndexedDB

HTML5本地儲存

html5 本地儲存

html5 本地儲存

相關推薦