indexedDB(三)查询(详细)篇

本文介绍了如何使用 IndexedDB 进行高效的数据查询操作,包括基本的键值查询、索引查询、游标查询以及多表关联查询等高级用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

上篇讲了简单的创建了一个数据库和两个表,这里就详细记录下查询;

这里先定义二个数组对象

data(){
    return {
      arr:[
        {id:1,name:'杨姐',age:18,sex:0},
        {id:2,name:'骏驰',age:33,sex:0},
        {id:3,name:'king',age:45,sex:1},
        {id:4,name:'浩杰',age:16,sex:0},
        {id:5,name:'浩B',age:89,sex:1},
        {id:6,name:'浩A',age:56,sex:0},
      ],
      arr1:[
        {id:1,height:160,weight:50},
        {id:2,height:150,weight:45},
        {id:3,height:160,weight:70},
        {id:4,height:170,weight:70},
        {id:5,height:180,weight:75},
        {id:6,height:180,weight:60},
      ],

      db:null, // 全局的indexedDB数据库实例。
    }
  },

上面的db 在初始化数据库的时候 赋值了 this.db=e.target.result;
表一 yyyyy 键值id 索引就是里面的3个字段
表二 two 键值id 索引就是里面的3个字段

根据键值查询

/ 读取数据
     getData(){
      let {db} = this;
      // 创建一个事务
      var request = db.transaction(['yyyyy'], 'readwrite').objectStore('yyyyy');
      let myObj = request.get(5);
       myObj.onsuccess = function (event) {
        console.log('数据读取成功',event.target.result);
      };

      myObj.onerror = function (event) {
        console.log('数据读取失败');
      }
    },

根据索引查询

注:索引是可以不唯一出现多个的,例如年龄,你存的数据里可以出现多个年龄一样的人,返回结果是第一个人

/ 读取数据
     getData(){
      let {db} = this;
      // 创建一个事务
      var request = db.transaction(['yyyyy'], 'readwrite').objectStore('yyyyy');
       // 单索引
      let result = request.index('sex');
      let myObj = request.get(0);
       myObj.onsuccess = function (event) {
        console.log('数据读取成功',event.target.result);
      };

      myObj.onerror = function (event) {
        console.log('数据读取失败');
      }
    },

索引游标查询,数据遍历

注:IDBKeyRange.only(1) 返回sex===1的
IDBKeyRange.lowerBound():指定下限。
IDBKeyRange.upperBound():指定上限。
IDBKeyRange.bound():同时指定上下限。
IDBKeyRange.only():指定只包含一个值。
// All keys ≤ x
var r1 = IDBKeyRange.upperBound(x);
// All keys < x
var r2 = IDBKeyRange.upperBound(x, true);
// All keys ≥ y
var r3 = IDBKeyRange.lowerBound(y);
// All keys > y
var r4 = IDBKeyRange.lowerBound(y, true);
// All keys ≥ x && ≤ y
var r5 = IDBKeyRange.bound(x, y);
// All keys > x &&< y
var r6 = IDBKeyRange.bound(x, y, true, true);
// All keys > x && ≤ y
var r7 = IDBKeyRange.bound(x, y, true, false);
// All keys ≥ x &&< y
var r8 = IDBKeyRange.bound(x, y, false, true);
// The key = z
var r9 = IDBKeyRange.only(z);

getIndexData(){
      let {db} = this;
      let newArr=[]
      // 创建一个事务
      var request = db.transaction(['yyyyy'], 'readwrite').objectStore('yyyyy');
      // 单索引
      let result = request.index('sex');
      // 打开游标
      let c = result.openCursor(IDBKeyRange.only(1));	//条件查询
      c.onsuccess = function(e) {//成功执行回调
          var cursor = e.target.result;
          if (cursor){//如果存在
          	
              newArr.push(cursor)
              cursor.continue();//继续下一个
          }
      }

    },

游标查询,数据遍历 (2)

如果条件比较多可以在onsuccess里面去判断,判断没有的话就是获取所有

 let c = result.openCursor();	//条件查询
      c.onsuccess = function(e) {//成功执行回调
          var cursor = e.target.result;
          if (cursor){//如果存在
          		if(cursor.key==1){
                	newArr.push(cursor)
              } 
              cursor.continue();//继续下一个
          }
      }

    },

多表关联查询

功能 需查找 sex为0的人 身高高于160的 manyGet()

// 多表查询
     async manyGet(){
      // 需查找 sex为0的人 身高高于160的
       let n = await this.getYYYY();
       // 再启一个事务 查询two表
        let newArr = [];
        await Promise.all(n.map(async (item,index) => {
         let two = await this.getTwo(item.id);
         if(two){
           Object.assign(item,two);
           newArr.push(item)
         }
       }))
       
      console.log(newArr);
    },
    getYYYY(){
      return new Promise((resolve,reject)=>{
        let {db} = this;
        // 创建一个事务
        var request = db.transaction(['yyyyy'], 'readwrite').objectStore('yyyyy');
        // 单索引
        let result =  request.index('sex');

        let newArr = []
        // 打开游标
        let c =  result.openCursor(IDBKeyRange.only(0));

        c.onsuccess = async (e) => {//成功执行回调
            console.log('成功执行回调');
            var cursor = e.target.result;
            if (cursor){//如果存在
                // console.log(cursor.key);//key是表的主键
                var stu = cursor.value;
                newArr.push(stu)
                cursor.continue();//继续下一个
            }else {
                resolve(newArr)
            }
             
        }
       
      })
    },
    getTwo(id){
      return new Promise((resolve,reject)=>{
        let {db} = this;
        var mmm =  db.transaction(['two'], 'readwrite').objectStore('two').get(id);
        mmm.onsuccess =  function (event) {
          // console.log('多表查询',event);
          let item = event.target.result;
          console.log(1111);
          if(item.height>160){
            resolve(item)
          }else{
            resolve()
          }
        };
      })
    },

在这里插入图片描述

### 使用 IndexedDB 进行分页查询 为了实现高效的分页查询,可以利用游标和索引来遍历数据库中的记录。通过设置范围并控制每次读取的数量来模拟分页效果。 #### 创建和打开数据库连接 首先创建或打开一个指定版本的 IndexedDB 数据库: ```javascript let request = indexedDB.open('MyDatabase', 1); request.onupgradeneeded = function(event) { let db = event.target.result; if (!db.objectStoreNames.contains('myObjectStore')) { db.createObjectStore('myObjectStore', { keyPath: 'id' }); } }; ``` #### 定义获取分页数据函数 定义用于获取特定页面的数据集的方法,此方法接受当前页码以及每页显示条目数作为参数: ```javascript function getPaginatedData(db, storeName, page, pageSize) { return new Promise((resolve, reject) => { const transaction = db.transaction([storeName], "readonly"); const objectStore = transaction.objectStore(storeName); // 记录总数 let totalRecords = 0; // 获取总记录数量 const countRequest = objectStore.count(); countRequest.onsuccess = () => { totalRecords = countRequest.result; // 开始位置计算 const start = (page - 1) * pageSize; // 如果起始位置超出最大值,则返回空数组 if (start >= totalRecords || start < 0){ resolve([]); return; } // 设置键范围以跳过前面不需要的部分 const rangeStart = IDBKeyRange.lowerBound(start, true); const cursorRequest = objectStore.openCursor(rangeStart); let results = []; let currentIndex = start; cursorRequest.onsuccess = function(event) { const cursor = event.target.result; if(cursor && currentIndex < start + pageSize){ results.push(cursor.value); currentIndex++; cursor.continue(); }else{ resolve(results); } }; cursorRequest.onerror = function(error) { console.error("Error fetching paginated data:", error); reject(error); }; }; countRequest.onerror = function(error) { console.error("Error counting records:", error); reject(error); }; }); } ``` 该代码片段展示了如何使用 `IDBKeyRange` 来限定检索起点,并结合游标的迭代机制完成分页逻辑[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值