indexedDB复合索引
生活随笔
收集整理的這篇文章主要介紹了
indexedDB复合索引
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目的：通過構建聚合索引，根據其中一個索引值匹配另一個索引值（不會對indexedDB數據進行深拷貝，只獲取索引的值），提供性能優化
// index.html <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title> </head><body><button id="add">添加</button><input type="text" placeholder="請輸入ID" id="idInput" /><button id="search">復合索引</button><script src="./db.js"></script> </body></html> // db.js //indexDB是瀏覽器本地數據庫,用于存儲大量數據,存儲格式為json var db; // 打開創建數據庫: function openDB(name, version = 1) {if (!window.indexedDB) {alert("您的瀏覽器不支持indexDB");return;}var indexDBRequest = window.indexedDB.open(name, version);indexDBRequest.onerror = function(e) {console.log("Open Error!");};indexDBRequest.onsuccess = function(e) {db = indexDBRequest.result; //這里才是 indexedDB對象console.log("創建/打開數據庫成功。db:%o", db);};indexDBRequest.onupgradeneeded = function(e) {console.log("DB version change to " + version);db = indexDBRequest.result;// 有了數據庫后我們自然希望創建一個表用來存儲數據，但indexedDB中沒有表的概念，而是叫 objectStore ，一個數據庫中可以包含多個objectStore，objectStore是一個靈活的數據結構，可以存放多種類型數據。也就是說一個objectStore相當于一張表，里面存儲的每條數據和一個鍵相關聯。if (!db.objectStoreNames.contains("students")) {var store = db.createObjectStore("students", { keyPath: "id" });//刪除objectStore// db.deleteObjectStore('storeName');// 創建索引// 在indexedDB中有兩種索引，一種是自增長的int值，一種是keyPath：自己指定索引列store.createIndex("nameIndex", "name", { unique: true });store.createIndex("ageIndex", "age", { unique: false });// 1. 創建復合索引store.createIndex("id_age", ["id", "age"], { unique: false });console.log("第一次創建數據庫或者更新數據庫。db:%o", db);}}; } window.onload = function() {openDB("dbname1"); };function saveData(storeName, data) {//創建事務var transaction = db.transaction([storeName], "readwrite");//訪問事務中的objectStorevar store = transaction.objectStore(storeName);//data為對象var addRequest = store.add(data);addRequest.onsuccess = function(event) {console.log("save data done...", store);};addRequest.onerror = function(event) {console.log("數據寫入失敗", store);}; } document.getElementById("add").onclick = function() {saveData("students", { id: "3", name: "張三3", age: 18 });saveData("students", { id: "1", name: "張三1", age: 27 });saveData("students", { id: "4", name: "張三4", age: 35 }); }; /** 通過 id 獲取 age 的值* 通過構建聚合索引，根據其中一個索引值匹配另一個索引值（不會對indexedDB數據進行深拷貝，只獲取索引的值） */ function getIndexByKey(indexName, indexRangeArr) {return new Promise((resolve) => {//創建事務var transaction = db.transaction(["students"], "readwrite");//訪問事務中的objectStorevar store = transaction.objectStore("students");const index = store.index(indexName);const indexRange = IDBKeyRange.bound(...indexRangeArr);const req = index.openKeyCursor(indexRange);req.onsuccess = function(ev) {const cursor = ev.target.result;if (!cursor) {resolve(null);} else {resolve({key: cursor.primaryKey,index: cursor.key,});}};}); } document.getElementById("search").onclick = async function() {const id = document.getElementById("idInput").value;if (id) {const res = await getIndexByKey("id_age", [[id], // id_age 復合索引[id + "_"], // id_age 復合索引,id + '_'一定大于 idfalse, // 包含上下限false, // 包含上下限]);console.log("search resulte...",res,"年齡是...",res ? res.index[1] : res);} else {console.log("請選輸入ID...");} };總結
以上是生活随笔為你收集整理的indexedDB复合索引的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 快解析教你，快速修改3389端口
- 下一篇： C2977 “boost::type_o