使用索引
let storeName = "productions" let store = db.transaction(storeName, 'readwrite').objectStore(storeName) let request = store.index('price').get('72.57'); request.onsuccess = (event) => { console.log(event.target.result); } request.onerror = (event) => { console.log(`query_index error with code：${event.target.errorCode}`); } 复制代码
游标查询 —— store.openCursor() + cursor.continue()
从上面可以知道，使用事务通过一个已知键或者索引都可以取得一条记录，但如果想取得多条数据，那就需要在事务中创建一个游标.
let cursorRequest = store.openCursor(); cursorRequest.onsuccess = (event) => { let cursor = event.target.result; // 当游标 cursor 值不存在时，代表游标查找结束或出现异常，所以需要提前判断 if (!cursor) return; console.log(cursor.value); // 在本次游标指向中，通过显示调用 continue 方法就可以将游标指向下一个数据 cursor.continue(); } cursorRequest.onerror = (event) => { console.log(`query_cursor error with code：${event.target.errorCode}`); } 复制代码
范围查找 —— index（索引） + cursor（游标） + IDBKeyRange（键范围）
IDBKeyRange（键范围）
IDBKeyRange.only(1643607832742)得到对应键值的记录IDBKeyRange.lowerBound(1643607832742, false)得到对应键值的下限（开始位置），第二个参数:
false—— 从1643607832742记录开始，直到最后true—— 从1643607832742的下一条记录开始，直到最后
IDBKeyRange.upperBound(1643607832742, false)得到对应键值的上限（结束位置），第二个参数:
false—— 从头开始，到1643607832742记录为止true—— 从头开始，到1643607832742的前一条记录为止
IDBKeyRange.bound()—— 同时指定上下限，接收四个参数：下限键、上限键、 可选布尔值 表示是否 跳过下限 、可选布尔值 是否 跳过上限
使用这样的查找方式更加理想，因为这样的方式可以实现根据指定索引在指定范围内开始游标查询，实现比较合理的范围查找.
let request = store.index('price').openCursor(IDBKeyRange.only(1643607832742)); request.onsuccess = (event) => { let cursor = event.target.result; if (!cursor) return; console.log(cursor.value); cursor.continue(); } request.onerror = (event) => { console.log(`query_idnex_cursor error with code：${event.target.errorCode}`); } 复制代码
实现分页查询
模拟数据
要实现查询的前提是得先有数据，这里就通过 setTimeout 模拟异步请求获取数据：
const getData = () => { setTimeout(() => { const list = [] const now = Date.now() for (let index = 0; index < 100; index++) { let price = Math.random() * 100 price = price < 10 ? price + 10 : price list.push({ id: now + index, name: `产品_${index + 1}`, price: price.toFixed(2) }) } data.value = list }) } 复制代码
然后通过循环调用 add() 方法将数写入到数据库中
const inser = (data = []) => { let objectStore = db.transaction(storeName, 'readwrite').objectStore(storeName) data.forEach(item => objectStore.add({ ...item })) console.log('数据插入成功！') } 复制代码
分页效果
实现效果如下
主要代码
useIndexDB.js
let db = null let storeName = 'test_db' let lastRecords = [] let currSize = 0 let indexArr = ["name", "price"] const getStoreByTransaction = () => db.transaction(storeName, 'readwrite').objectStore(storeName) const query = (payload) => { return new Promise((resovle, reject) => { let records = [] let { name, value, type, size = 10 } = payload || {} let objectStore = getStoreByTransaction() let request if (type) { request = type === 'next' ? objectStore.openCursor(IDBKeyRange.lowerBound(lastRecords[lastRecords.length - 1].id, type)) : objectStore.openCursor(IDBKeyRange.upperBound(lastRecords[0].id, true), type) } else { request = name ? objectStore.index(name).openCursor(IDBKeyRange.only(value), type) : objectStore.openCursor() } lastRecords = [] request.onsuccess = (event) => { let cursor = event.target.result if (!cursor || currSize >= size) { currSize = 0 resovle(records) return } let lastItem = cursor.value lastRecords.push(lastItem) records.push(lastItem) currSize++ if (!name) { cursor.continue() } else { currSize = 0 resovle(records) } } request.onerror = (event) => { reject(`query_idnex_cursor error with code：${event.target.errorCode}`) } }) } const inser = (data = []) => { let objectStore = db.transaction(storeName, 'readwrite').objectStore(storeName) data.forEach(item => objectStore.add({ ...item })) console.log('数据插入成功！') } const open = (payload) => { payload = payload || { name: 'test', version: 1, storeName: "productions" } return new Promise((resovle, reject) => { let request = indexedDB.open(payload.name, payload.version) storeName = payload.storeName request.onsuccess = (event) => { db = event.target.result resovle({ query, inser, getStoreByTransaction, db }) console.log(`Database connection successfully established`) } request.onerror = (event) => { reject(`Failed to open: ${event.target.errorCode}`) } request.onupgradeneeded = (event) => { db = event.target.result if (db.objectStoreNames.contains("productions")) { db.deleteObjectStore("productions") } let objectStore = db.createObjectStore("productions", { keyPath: "id" }) indexArr.forEach((name) => { objectStore.createIndex(name, name, { unique: false }) }) } }) } export default open 复制代码
App.vue
<script setup lang="ts"> import { reactive, ref, onMounted, computed } from "vue" import openDB from "./useIndexDB.js"; const data = ref([]) const queryResult = ref([]) const formItem = reactive({ price: '', name: '' }) let dbObj = null onMounted(() => { openDB() .then(({ query, inser }) => { dbObj = { query, inser } }) }) const getData = () => { setTimeout(() => { const list = [] const now = Date.now() for (let index = 0; index < 100; index++) { let price = Math.random() * 100 price = price < 10 ? price + 10 : price list.push({ id: now + index, name: `产品_${index + 1}`, price: price.toFixed(2) }) } data.value = list console.log("数据获取成功！", data.value); }) } const insertData = () => { dbObj.inser(data.value) } const payload = computed(() => { let obj = { value: formItem.name } if (formItem.name) { obj.name = 'name' obj.value = formItem.name } if (formItem.price) { obj.name = 'price' obj.value = formItem.price } return obj }) const loadPage = (type) => { dbObj .query({ type }) .then((result) => { console.log(result) queryResult.value = result.sort((a,b)=> a.id - b.id) }) } const queryData = () => { dbObj .query({ ...payload.value }) .then((result) => { console.log(result) queryResult.value = result.sort() }) } </script> <template> <div class="btn-box"> <button @click="getData">获取数据</button> <button @click="insertData">插入数据</button> </div> <div class="box"> <label for="name"> 名称： <input id="name" v-model="formItem.name" type="text" /> </label> <label for="price"> 价格： <input id="price" v-model="formItem.price" type="text" /> </label> <button class="btn" @click="queryData">查询</button> </div> <ul class="list" v-show="queryResult.length"> <li v-for="item in queryResult" :key="item.id">{{item.name}} —— {{ item.price}}</li> <div> <button @click="loadPage('prev')">上一页</button> <button @click="loadPage('next')">下一页</button> </div> </ul> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; transition: all 0.5s ease; } .box label { margin: 0 10px; } button { margin: 10px; } .list{ width: 400px; margin: 10px auto; } </style>
