使用

setDBData({ id: 'name', value: '張三', expire: new Date().getTime() + 10000 }, 'info', 'infoDB')
console.log(getDBData('name', 'info', 'infoDB')); 

添加或更新數據

async function setDBData(data,storeName = "storeName",dbName = "dbName",version
) {const db = await openDB(dbName, storeName, version);const data_ = await getDataByKey(db, storeName, data.id);// 如果該主鍵對應的數據已存在，則做更新操作if (data_) {return updateDB(db, storeName, data);}return addData(db, storeName, data);
}

獲取數據

async function getDBData(key,storeName = "storeName",dbName = "dbName",version
) {const db = await openDB(dbName, storeName, version);const data_ = await getDataByKey(db, storeName, key);// 設置了有效期，且已過期，則刪除數據if (data_?.expire && data_.expire < new Date().getTime()) {await deleteDB(db, storeName, key);return;}return data_;
}

打開數據庫

function openDB(dbName, storeName, version = 1) {return new Promise((resolve, reject) => {const indexedDB = window.indexedDB;let db;const request = indexedDB.open(dbName, version);request.onsuccess = function (event) {db = event.target.result; // 數據庫對象resolve(db);};request.onerror = function (event) {reject(event);};request.onupgradeneeded = function (event) {// 數據庫創建或升級的時候會觸發console.log("onupgradeneeded");db = event.target.result; // 數據庫對象let objectStore;if (!db.objectStoreNames.contains(storeName)) {objectStore = db.createObjectStore(storeName, { keyPath: "id" }); // 創建表// objectStore.createIndex('name', 'name', { unique: true }) // 創建索引 可以讓你搜索任意字段}};});
}

新增數據

function addData(db, storeName, data) {return new Promise((resolve, reject) => {const request = db.transaction([storeName], "readwrite") // 事務對象 指定表格名稱和操作模式（"只讀"或"讀寫"）.objectStore(storeName) // 倉庫對象.add(data);request.onsuccess = function (event) {resolve(event);};request.onerror = function (event) {reject(event);throw new Error(event.target.error);};});
}

通過主鍵讀取數據

function getDataByKey(db, storeName, key) {return new Promise((resolve, reject) => {const transaction = db.transaction([storeName]); // 事務const objectStore = transaction.objectStore(storeName); // 倉庫對象const request = objectStore.get(key);request.onerror = function (event) {reject(event);};request.onsuccess = function (event) {resolve(request.result);};});
}

通過游標讀取數據

function cursorGetData(db, storeName) {const list = [];const store = db.transaction(storeName, "readwrite") // 事務.objectStore(storeName); // 倉庫對象const request = store.openCursor(); // 指針對象return new Promise((resolve, reject) => {request.onsuccess = function (e) {const cursor = e.target.result;if (cursor) {// 必須要檢查list.push(cursor.value);cursor.continue(); // 遍歷了存儲對象中的所有內容} else {resolve(list);}};request.onerror = function (e) {reject(e);};});
}

通過索引讀取數據

function getDataByIndex(db, storeName, indexName, indexValue) {const store = db.transaction(storeName, "readwrite").objectStore(storeName);const request = store.index(indexName).get(indexValue);return new Promise((resolve, reject) => {request.onerror = function (e) {reject(e);};request.onsuccess = function (e) {resolve(e.target.result);};});
}

通過索引和游標查詢記錄

function cursorGetDataByIndex(db, storeName, indexName, indexValue) {const list = [];const store = db.transaction(storeName, "readwrite").objectStore(storeName); // 倉庫對象const request = store.index(indexName) // 索引對象.openCursor(IDBKeyRange.only(indexValue)); // 指針對象return new Promise((resolve, reject) => {request.onsuccess = function (e) {const cursor = e.target.result;if (cursor) {list.push(cursor.value);cursor.continue(); // 遍歷了存儲對象中的所有內容} else {resolve(list);}};request.onerror = function (ev) {reject(ev);};});
}

更新數據

function updateDB(db, storeName, data) {const request = db.transaction([storeName], "readwrite") // 事務對象.objectStore(storeName) // 倉庫對象.put(data);return new Promise((resolve, reject) => {request.onsuccess = function (ev) {resolve(ev);};request.onerror = function (ev) {resolve(ev);};});
}

刪除數據

function deleteDB(db, storeName, id) {const request = db.transaction([storeName], "readwrite").objectStore(storeName).delete(id);return new Promise((resolve, reject) => {request.onsuccess = function (ev) {resolve(ev);};request.onerror = function (ev) {resolve(ev);};});
}

刪除數據庫

function deleteDBAll(dbName) {console.log(dbName);const deleteRequest = window.indexedDB.deleteDatabase(dbName);return new Promise((resolve, reject) => {deleteRequest.onerror = function (event) {console.log("刪除失敗");};deleteRequest.onsuccess = function (event) {console.log("刪除成功");};});
}

關閉數據庫

function closeDB(db) {db.close();console.log("數據庫已關閉");
}