首页 > 其他分享 >Dexie.js 库 增删改查indexdb示例,游标、索引使用等

Dexie.js 库 增删改查indexdb示例,游标、索引使用等

时间:2024-12-09 20:21:52浏览次数:3  
标签:Dexie console 示例 db 游标 索引 myObjectStore error

增删改查

以下是如何使用 Dexie.js 库进行增删改查操作的示例:

1. 初始化数据库

首先,你需要安装 Dexie.js:

npm install dexie

然后,在你的代码中引入并初始化 Dexie.js:

import Dexie from 'dexie';

const db = new Dexie('myDatabase');
db.version(1).stores({
  myObjectStore: '++id, name, email',
});

2. 添加数据(Create)

const newData = { name: 'John Doe', email: 'john@example.com' };
db.myObjectStore.add(newData).then(id => {
  console.log(`Data added successfully with ID: ${id}`);
}).catch(error => {
  console.error('Unable to add data:', error);
});

3. 读取数据(Read)

db.myObjectStore.get(1).then(data => {
  if (data) {
    console.log('Data retrieved:', data);
  } else {
    console.log('No data found with ID:', 1);
  }
}).catch(error => {
  console.error('Unable to retrieve data:', error);
});

4. 更新数据(Update)

const updatedData = { id: 1, name: 'Jane Doe', email: 'jane@example.com' };
db.myObjectStore.update(updatedData).then(result => {
  if (result === 1) {
    console.log('Data updated successfully');
  } else if (result === 0) {
    console.log('No data found with ID:', updatedData.id);
  }
}).catch(error => {
  console.error('Unable to update data:', error);
});

5. 删除数据(Delete)

db.myObjectStore.delete(1).then(() => {
  console.log('Data deleted successfully');
}).catch(error => {
  console.error('Unable to delete data:', error);
});

这些示例展示了如何使用 Dexie.js 库进行基本的增删改查操作。Dexie.js 提供了简洁的 API,使得操作 IndexedDB 变得更加容易和直观。请确保在实际应用中根据需要调整对象存储和索引的定义。

游标

Dexie.js 提供了游标遍历功能,允许你遍历对象存储中的所有记录。以下是如何使用 Dexie.js 进行游标遍历的示例:

1. 遍历所有记录

db.myObjectStore.each(item => {
  console.log(item);
}).catch(error => {
  console.error('Error traversing data:', error);
});

2. 使用游标遍历并处理记录

db.myObjectStore.openCursor().then(cursor => {
  if (!cursor) return; // 如果没有更多记录,退出

  console.log('Key:', cursor.key, 'Value:', cursor.value);

  // 继续到下一个记录
  cursor.continue().then(nextCursor => {
    // 递归调用以处理下一个记录
    return db.myObjectStore.openCursor();
  });
}).catch(error => {
  console.error('Error traversing data:', error);
});

3. 使用游标遍历并修改记录

db.myObjectStore.openCursor().then(cursor => {
  if (!cursor) return; // 如果没有更多记录,退出

  // 修改当前记录
  cursor.update({ ...cursor.value, name: 'Updated Name' }).then(() => {
    console.log('Record updated:', cursor.key);
  });

  // 继续到下一个记录
  cursor.continue().then(nextCursor => {
    // 递归调用以处理下一个记录
    return db.myObjectStore.openCursor();
  });
}).catch(error => {
  console.error('Error traversing data:', error);
});

4. 使用游标遍历并删除记录

db.myObjectStore.openCursor().then(cursor => {
  if (!cursor) return; // 如果没有更多记录,退出

  // 删除当前记录
  cursor.delete().then(() => {
    console.log('Record deleted:', cursor.key);
  });

  // 继续到下一个记录
  cursor.continue().then(nextCursor => {
    // 递归调用以处理下一个记录
    return db.myObjectStore.openCursor();
  });
}).catch(error => {
  console.error('Error traversing data:', error);
});

这些示例展示了如何使用 Dexie.js 进行游标遍历,包括遍历所有记录、修改记录和删除记录。游标遍历是处理大量数据时非常有用的功能,因为它允许你逐个处理记录,而不是一次性加载所有记录到内存中。

索引

在 Dexie.js 中,创建索引是在定义对象存储(Object Store)时进行的。你可以在 version() 方法的 stores() 配置中指定索引。以下是如何使用 Dexie.js 创建索引的示例:

1. 初始化数据库并创建对象存储和索引

import Dexie from 'dexie';

const db = new Dexie('myDatabase');

db.version(1).stores({
  myObjectStore: '++id, name, email', // '++id' 表示自动递增的主键,'name' 和 'email' 是索引
});

// 如果你需要添加更多复杂的索引,可以使用以下语法:
db.version(2).stores({
  myObjectStore: '++id, name, email, &email', // '&email' 表示唯一索引
});

2. 使用索引进行查询

// 查询 name 索引
db.myObjectStore.where('name').equals('John Doe').toArray().then(results => {
  console.log('Results:', results);
});

// 查询 email 索引
db.myObjectStore.where('email').startsWith('john').toArray().then(results => {
  console.log('Results:', results);
});

// 查询唯一索引
db.myObjectStore.where('email').equals('john@example.com').toArray().then(results => {
  console.log('Results:', results);
});

3. 动态添加索引

如果你需要在对象存储创建之后动态添加索引,可以使用 createIndex() 方法:

db.myObjectStore.createIndex('age', 'age', { unique: false });

4. 删除索引

如果你需要删除索引,可以使用 deleteIndex() 方法:

db.myObjectStore.deleteIndex('age');

这些示例展示了如何在 Dexie.js 中创建和使用索引。索引是数据库查询性能的关键因素,合理使用索引可以显著提高查询速度。

标签:Dexie,console,示例,db,游标,索引,myObjectStore,error
From: https://www.cnblogs.com/jocongmin/p/18595969

相关文章

  • ts 装饰器使用示例
    在TypeScript中,装饰器是一种特殊类型的声明,它能够被附加到类声明、方法、访问符、属性或参数上。下面是一些常见的装饰器示例:1.类装饰器类装饰器用于类声明之前,用来监视、修改或替换类定义。functionsealed(constructor:Function){Object.seal(constructor);Object......
  • Oracle的打开游标(OPEN_CURSORS)
    一、OPEN_CURSORS概述OPEN_CURSORS指定会话一次可以拥有的打开游标(私有SQL区域的句柄)的最大数量。可以使用此参数来防止会话打开过多的游标。OPEN_CURSORS参数说明特性描述参数类型Integer默认值50修改方式ALTERSYSTEMPDB级别修改是参数范围0......
  • VLM-OCR-Demo:一个使用VLM用于OCR任务的示例
    https://www.cnblogs.com/mingupupu/p/18594592 前言上一篇文章TesseractOCR-GUI:基于WPF/C#构建TesseractOCR简单易用的用户界面中我们构建了一个方便使用TesseractOCR的用户界面,今天构建一个类似的界面,使用SemanticKernel接入视觉模型,测试一下用视觉模型做OCR任务的效果。在......
  • VLM-OCR-Demo:一个使用VLM用于OCR任务的示例
    前言上一篇文章TesseractOCR-GUI:基于WPF/C#构建TesseractOCR简单易用的用户界面中我们构建了一个方便使用TesseractOCR的用户界面,今天构建一个类似的界面,使用SemanticKernel接入视觉模型,测试一下用视觉模型做OCR任务的效果。在之前的文章使用Tesseract进行图片文字识别的总结中......
  • 如何使用YOLOv8训练自动驾驶路面分类模型。涵数据集准备、模型训练、等步骤,并提供自动
    自动驾驶路面分类数据集,按照不同的天气条件,即干燥、湿润、水上、新雪、融化的雪和冰。不同的道路材料属性包括沥青、混凝土、泥浆和碎石。不同的道路平整性分为光滑、轻微不平和严重不平。共27类,37万张图像,13GB数据好的,让我们从数据集准备开始,逐步介绍如何使用深度学习框......
  • 如何使用yolov8纽扣电池缺陷检测数据集进行训练,并提供详细的步骤和代码示例 纽扣电池
    纽扣电池缺陷检测数据集包含3种缺陷类别(脏污、凹陷、划痕),已经划分为训练集和验证集,有xml和txt标签,yolo可用,共1110张类别名称names:0:dirty1:depression2:scratch数据集包含3种缺陷类别(脏污、凹陷、划痕),已经划分为训练集和验证集,并且标注为YOLO格式和VOC格式,亲......
  • 如何使用红外船舶数据集进行训练,步骤和代码示例应该是如何?含 1284 幅红外遥感图像和30
    红外船舶数据集,包含1284幅红外遥感图像和3061个船舶实例。图像大小为500*500。所有图像都经过辐射校准和快速视线光谱超立方体大气分析。共有373个近岸场景,包含924个实例;911个离岸场景,包含2137个实例。已做好标注,有TXT(YOLO)和XML格式红外船舶数据集,包含1284......
  • 如何使用YOLOv5进行玩手机和打电话检测,并提供详细的步骤和代码示例玩手机或者打电话进
    yolov5玩手机打电话检测pytorch框架可以对图片或视频中的人物是否玩手机或者打电话进行识别有数据集,已打好标框,10000张,好的,让我们继续细化如何使用YOLOv5进行玩手机和打电话检测,并提供详细的步骤和代码示例。1.数据集准备1.1.数据集结构确保你的数据集按照以下......
  • ThreeJS入门(185):THREE.OrbitControls 知识详解,示例代码
    作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,webgl,ThreeJS,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第185篇入门文章......
  • ThreeJS入门(182):THREE.FirstPersonControls 知识详解,示例代码
    作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,webgl,ThreeJS,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第182篇入门文章......