indexedDB复合索引
生活随笔
收集整理的這篇文章主要介紹了
indexedDB复合索引
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
目的：通過(guò)構(gòu)建聚合索引，根據(jù)其中一個(gè)索引值匹配另一個(gè)索引值（不會(huì)對(duì)indexedDB數(shù)據(jù)進(jìn)行深拷貝，只獲取索引的值），提供性能優(yōu)化
// 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="請(qǐng)輸入ID" id="idInput" /><button id="search">復(fù)合索引</button><script src="./db.js"></script> </body></html> // db.js //indexDB是瀏覽器本地?cái)?shù)據(jù)庫(kù),用于存儲(chǔ)大量數(shù)據(jù),存儲(chǔ)格式為json var db; // 打開(kāi)創(chuàng)建數(shù)據(jù)庫(kù): 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對(duì)象console.log("創(chuàng)建/打開(kāi)數(shù)據(jù)庫(kù)成功。db:%o", db);};indexDBRequest.onupgradeneeded = function(e) {console.log("DB version change to " + version);db = indexDBRequest.result;// 有了數(shù)據(jù)庫(kù)后我們自然希望創(chuàng)建一個(gè)表用來(lái)存儲(chǔ)數(shù)據(jù)，但indexedDB中沒(méi)有表的概念，而是叫 objectStore ，一個(gè)數(shù)據(jù)庫(kù)中可以包含多個(gè)objectStore，objectStore是一個(gè)靈活的數(shù)據(jù)結(jié)構(gòu)，可以存放多種類型數(shù)據(jù)。也就是說(shuō)一個(gè)objectStore相當(dāng)于一張表，里面存儲(chǔ)的每條數(shù)據(jù)和一個(gè)鍵相關(guān)聯(lián)。if (!db.objectStoreNames.contains("students")) {var store = db.createObjectStore("students", { keyPath: "id" });//刪除objectStore// db.deleteObjectStore('storeName');// 創(chuàng)建索引// 在indexedDB中有兩種索引，一種是自增長(zhǎng)的int值，一種是keyPath：自己指定索引列store.createIndex("nameIndex", "name", { unique: true });store.createIndex("ageIndex", "age", { unique: false });// 1. 創(chuàng)建復(fù)合索引store.createIndex("id_age", ["id", "age"], { unique: false });console.log("第一次創(chuàng)建數(shù)據(jù)庫(kù)或者更新數(shù)據(jù)庫(kù)。db:%o", db);}}; } window.onload = function() {openDB("dbname1"); };function saveData(storeName, data) {//創(chuàng)建事務(wù)var transaction = db.transaction([storeName], "readwrite");//訪問(wèn)事務(wù)中的objectStorevar store = transaction.objectStore(storeName);//data為對(duì)象var addRequest = store.add(data);addRequest.onsuccess = function(event) {console.log("save data done...", store);};addRequest.onerror = function(event) {console.log("數(shù)據(jù)寫入失敗", 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 }); }; /** 通過(guò) id 獲取 age 的值* 通過(guò)構(gòu)建聚合索引，根據(jù)其中一個(gè)索引值匹配另一個(gè)索引值（不會(huì)對(duì)indexedDB數(shù)據(jù)進(jìn)行深拷貝，只獲取索引的值） */ function getIndexByKey(indexName, indexRangeArr) {return new Promise((resolve) => {//創(chuàng)建事務(wù)var transaction = db.transaction(["students"], "readwrite");//訪問(wèn)事務(wù)中的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 復(fù)合索引[id + "_"], // id_age 復(fù)合索引,id + '_'一定大于 idfalse, // 包含上下限false, // 包含上下限]);console.log("search resulte...",res,"年齡是...",res ? res.index[1] : res);} else {console.log("請(qǐng)選輸入ID...");} };總結(jié)
以上是生活随笔為你收集整理的indexedDB复合索引的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 快解析教你，快速修改3389端口
- 下一篇： C2977 “boost::type_o