IndexedDB-增增删改查示例

本文涉及的产品
对象存储 OSS,标准 - 本地冗余存储 20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000 次 1年
简介: IndexedDB-增增删改查示例

1. 增加数据

// 打开数据库
const dbName = 'myDatabase';
const request = indexedDB.open(dbName, 1);

// 数据库被新建或升级时创建对象存储空间
request.onupgradeneeded = event => {
  const db = event.target.result;
  const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
  objectStore.createIndex('email', 'email', { unique: true });
};

// 成功打开数据库
request.onsuccess = event => {
  const db = event.target.result;

  // 添加数据到对象存储空间
  const transaction = db.transaction(['customers'], 'readwrite');
  const objectStore = transaction.objectStore('customers');
  
  objectStore.add({ id: 1, name: 'Alice', email: 'alice@example.com' });
  objectStore.add({ id: 2, name: 'Bob', email: 'bob@example.com' });
  
  transaction.oncomplete = () => {
    console.log('Data added successfully');
  };

// 打开数据库失败
request.onerror = event => {
  console.log('Error opening database', event.target.error);
};

2. 修改数据

// 打开数据库
const request = window.indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.log('打开数据库失败');
};

request.onsuccess = function(event) {
  const db = event.target.result;

  // 创建事务并获取数据存储对象
  const transaction = db.transaction(['dataStore'], 'readwrite');
  const objectStore = transaction.objectStore('dataStore');

  // 指定要修改的键值(假设你想修改 title 为 '测试1' 的数据)
  const key = '测试1';

  // 使用 get 方法获取要修改的数据
  const getRequest = objectStore.get(key);

  getRequest.onsuccess = function(event) {
    const data = event.target.result;

    // 修改数据(假设你想修改 content 字段)
    data.content = '这是修改后的内容';

    // 使用 put 方法将修改后的数据写回数据库
    const putRequest = objectStore.put(data);

    putRequest.onsuccess = function(event) {
      console.log('数据修改成功');
    };

    putRequest.onerror = function(event) {
      console.log('数据修改失败');
    };
  };

  getRequest.onerror = function(event) {
    console.log('获取数据失败');
  };

  transaction.oncomplete = function(event) {
    console.log('事务完成');
    db.close();
  };

  transaction.onerror = function(event) {
    console.log('事务出错');
  };
};

request.onupgradeneeded = function(event) {
  const db = event.target.result;

  // 创建对象存储空间
  const objectStore = db.createObjectStore('dataStore', { keyPath: 'title' });

  // 可以在这里添加索引等其他设置
};

3.修改数据

// 打开数据库
const request = window.indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.log('打开数据库失败');
};

request.onsuccess = function(event) {
  const db = event.target.result;

  // 创建事务并获取数据存储对象
  const transaction = db.transaction(['dataStore'], 'readwrite');
  const objectStore = transaction.objectStore('dataStore');

  // 指定要修改的键值(假设你想修改 title 为 '测试1' 的数据)
  const key = '测试1';

  // 使用 get 方法获取要修改的数据
  const getRequest = objectStore.get(key);

  getRequest.onsuccess = function(event) {
    const data = event.target.result;

    // 修改数据(假设你想修改 content 字段)
    data.content = '这是修改后的内容';

    // 使用 put 方法将修改后的数据写回数据库
    const putRequest = objectStore.put(data);

    putRequest.onsuccess = function(event) {
      console.log('数据修改成功');
    };

    putRequest.onerror = function(event) {
      console.log('数据修改失败');
    };
  };

  getRequest.onerror = function(event) {
    console.log('获取数据失败');
  };

  transaction.oncomplete = function(event) {
    console.log('事务完成');
    db.close();
  };

  transaction.onerror = function(event) {
    console.log('事务出错');
  };
};

request.onupgradeneeded = function(event) {
  const db = event.target.result;

  // 创建对象存储空间
  const objectStore = db.createObjectStore('dataStore', { keyPath: 'title' });

  // 可以在这里添加索引等其他设置
};

4. 查询数据

// 打开数据库
const dbName = 'myDatabase';
const request = indexedDB.open(dbName, 1);

// 数据库被新建或升级时创建对象存储空间
request.onupgradeneeded = event => {
  const db = event.target.result;
  const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
  objectStore.createIndex('email', 'email', { unique: true });
};

// 成功打开数据库
request.onsuccess = event => {
  const db = event.target.result;

  // 获取数据
  const transaction = db.transaction(['customers'], 'readonly');
  const objectStore = transaction.objectStore('customers');

  // 获取所有数据
  const getAllRequest = objectStore.getAll();
  getAllRequest.onsuccess = () => {
    console.log(getAllRequest.result);
  };

  // 通过主键获取数据
  const getRequest = objectStore.get(1);
  getRequest.onsuccess = () => {
    console.log(getRequest.result);
  };

  // 通过索引获取数据
  const index = objectStore.index('email');
  const getEmailRequest = index.get('bob@example.com');
  getEmailRequest.onsuccess = () => {
    console.log(getEmailRequest.result);
  };
  
    // const index = objectStore.index("introduce");
    // const getEmailRequest = index.openCursor(IDBKeyRange.only("暂无介绍"));
    // getEmailRequest.onsuccess = () => {
    //   const cursor = getEmailRequest.result;
    //   if (cursor) {
    //     console.log(cursor.value);
    //     cursor.continue();
    //   }
    // };

  transaction.oncomplete = () => {
    console.log('Data retrieval completed');
    db.close();
  };
};

// 打开数据库失败
request.onerror = event => {
  console.log('Error opening database', event.target.error);
};
相关实践学习
通义万相文本绘图与人像美化
本解决方案展示了如何利用自研的通义万相AIGC技术在Web服务中实现先进的图像生成。
目录
相关文章
|
JavaScript
jQuery学习(七)— append方法与appendTo方法
jQuery学习(七)— append方法与appendTo方法
|
存储 数据库 索引
客户端存储 —— IndexedDB 实现分页查询(下)
客户端存储 —— IndexedDB 实现分页查询
712 0
|
JavaScript
Property “selectedItemIndex“ was accessed during render but is not defined on instance. 报错解决
Property “selectedItemIndex“ was accessed during render but is not defined on instance. 报错解决
1038 0
|
8月前
|
Java 关系型数据库 MySQL
深入解析 @Transactional——Spring 事务管理的核心
本文深入解析了 Spring Boot 中 `@Transactional` 的工作机制、常见陷阱及最佳实践。作为事务管理的核心注解,`@Transactional` 确保数据库操作的原子性,避免数据不一致问题。文章通过示例讲解了其基本用法、默认回滚规则(仅未捕获的运行时异常触发回滚)、因 `try-catch` 或方法访问修饰符不当导致失效的情况,以及数据库引擎对事务的支持要求。最后总结了使用 `@Transactional` 的五大最佳实践,帮助开发者规避常见问题,提升项目稳定性与可靠性。
1279 12
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
1136 10
|
存储
半自动:图床解决方案,使用115当图床使用 获取图片直链
半自动:图床解决方案,使用115当图床使用 获取图片直链
447 5
|
JavaScript 数据可视化 前端开发
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
漏刻有时数据可视化Echarts组件开发(21):基于echarts开发的自动旋转map3D下钻和柱图地图
465 1
关于idea报错:Cannot determine path to 'tools.jar' library for 17 (E:\java-jdk\jdk17)的解决办法
关于idea报错:Cannot determine path to 'tools.jar' library for 17 (E:\java-jdk\jdk17)的解决办法
|
IDE 前端开发 时序数据库
【Docker项目实战】使用Docker部署speedtest-tracker速度测试追踪器
【6月更文挑战第4天】使用Docker部署speedtest-tracker速度测试追踪器
1032 1
|
JavaScript
js 下载文件(根据URL下载文件,根据URL下载图片)
js 下载文件(根据URL下载文件,根据URL下载图片)
1577 0