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);
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/642359.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ STL之stack的使用及模拟实现

文章目录 1. 介绍2. stack的使用3. 栈的模拟实现 1. 介绍 stack是一种容器适配器,专门用在具有后进先出操作的上下文环境中,其删除只能从容器的一端进行元素的插入与提取操作。 stack是作为容器适配器被实现的,容器适配器即是对特定类封装作…

(M)unity2D敌人的创建、人物属性设置,遇敌掉血

敌人的创建 1.敌人添加与组件设置 1)添加敌人后,刚体添加,碰撞体添加(一个碰撞体使猪在地上走,不接触人,另一个碰撞体组件使人和猪碰在一起产生伤害) ①刚体 ②碰撞体一 设置的只在脚下&a…

从0开始学习mysql 第十四课:数据库设计与三范式

第十四课:数据库设计与三范式 学习目标 在本课中,你将学习关系数据库设计的三个基本范式,它们是用来规范数据库结构,减少数据冗余和改善数据完整性的准则。你将学习: 第一范式(1NF)的概念和实…

知识产权管理

内容: 狭义---著作权,领接权,专利权,商标权 广义---著作权,领接权,专利权,商标权及商业秘密权,防止不正当竞争权,植物新品种权,集成电路布图设计圈、地理标志…

springboot整合MongoDB实战

目录 环境准备 引入依赖 配置yml 注入mongoTemplate 集合操作 文档操作 创建实体 添加文档 查询文档 更新文档 删除文档 环境准备 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-da…

epoll接口

B站就业班视频代码搬运 p54 但是我跟老师的代码还是有点区别。。老师那里居然ev复用。。那么数组里那些结构体都用不上&#xff1f;&#xff1f; 注意&#xff0c;本篇不是epoll反应堆。 I/O多路复用一共有select , poll ,epoll等模型&#xff0c;但是真正的高并发的话是epo…

优先级队列(堆)详解

优先级队列&#xff08;堆&#xff09;详解 目录 堆的概念堆的存储方式堆的基本操作优先级队列模拟实现PriorityQueue接口介绍堆排序Top-k问题 1、堆的概念 如果有一个关键码的集合K {k0&#xff0c;k1&#xff0c; k2&#xff0c;…&#xff0c;kn-1}&#xff0c;把它的所…

安卓ADB实操教程:以三星Galaxy S10为例

引言 ADB&#xff08;Android Debug Bridge&#xff09;是一个功能强大的命令行工具&#xff0c;它允许用户与安卓设备进行通信以便进行各种操作&#xff0c;包括安装和调试应用程序&#xff0c;访问设备的shell等。本教程将以三星Galaxy S10为例&#xff0c;详细介绍如何使用…

SAP 五个报废率设置简介(上)

通常在生产制造过程中都会面临报废率的问题,生产工艺路线的问题,原材料质量的问题,总会有一些产品在生产过程中被做成报废品,通常报废率的设置有时候会遵循行业的标准设置,亦或者根据工厂生产中统计的历史数据分析后根据不同的产品设置不同的报废率,从而在执行物料的采购…

VM下Unbunt虚拟机上网设置

系列文章目录 VM下虚拟机上网设置 VM下虚拟机上网设置 右击VM软件中你需要设置的虚拟机&#xff0c;选择设置 宿主机如果你用的是笔记本外加WIFI连接选择NAT网络模式 进入虚拟机看能否上网 不行的话&#xff0c;进入虚拟机点击&#xff0c;选择最后一栏&#xff0c;编辑连接 点…

华为认证的HCIP考实验考试么?

HCIP在考试的时候不考实验&#xff0c;只考笔试&#xff0c;只是不同方向的HCIP认证考试的考试科目不同&#xff0c;有的考一科&#xff0c;有的考二科&#xff0c;有的考三科&#xff0c;具体看方向来定。HCIA和HCIP只考笔试。HCIE考笔试和实验。 虽然HCIP不考实操&#xff0…

《WebKit 技术内幕》学习之七(1): 渲染基础

《WebKit 技术内幕》之七&#xff08;1&#xff09;&#xff1a; 渲染基础 WebKit的布局计算使用 RenderObject 树并保存计算结果到 RenderObject 树。 RenderObject 树同其他树&#xff08;如 RenderLayer 树等&#xff09;&#xff0c;构成了 WebKit 渲染的为要基础设施。 1…

【数据结构】链表(单链表与双链表实现+原理+源码)

博主介绍&#xff1a;✌全网粉丝喜爱、前后端领域优质创作者、本质互联网精神、坚持优质作品共享、掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战✌有需要可以联系作者我哦&#xff01; &#x1f345;附上相关C语言版源码讲解&#x1f345; &#x1f44…

python04-变量命名规则

python需要使用标识符来给变量命名。 标识符&#xff0c;我来解释下&#xff0c;就是给程序中变量、类、方法命名的符号&#xff0c;简单理解就是起一个名字&#xff0c;这个名字必须是合法的名字&#xff0c; 对于Python来说&#xff0c;标识符必须是以字母、下划线(_)开头&…

鸿蒙自定义刷新组件使用

前言 DevEco Studio版本&#xff1a;4.0.0.600 1、RefreshLibrary_HarmonyOS.har&#xff0c;用于HarmonyOS "minAPIVersion": 9, "targetAPIVersion": 9, "apiReleaseType": "Release", "compileSdkVersion": "3.…

用户画像系列——在线服务调优实践

前面文章讲到画像的应用的几个方面&#xff0c;其中画像的在线服务应用主要是在推荐场景、策略引擎场景&#xff0c;这两部分场景都是面向线上的c端服务。 推荐场景&#xff1a;根据不同的用户推荐不同的内容&#xff0c;做到个性化推荐&#xff0c;需要读取画像的一些偏好数据…

openssl3.2/test/certs - 008 - root-nonca trust variants: +serverAuth +anyEKU

文章目录 openssl3.2/test/certs - 008 - root-nonca trust variants: serverAuth anyEKU概述笔记END openssl3.2/test/certs - 008 - root-nonca trust variants: serverAuth anyEKU 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 // \file my_openssl_win_log_doc…

20240123----重返学习-原生js纯函数获取用户电脑上的文件

20240123----重返学习-原生js纯函数获取用户电脑上的文件 思路说明 通过外加点击后&#xff0c;通过监听这个DOM元素的change事件&#xff0c;在用户点击之后就能拿到用户电脑上的文件了。通过原生js来动态创建type"file"的input元素&#xff0c;之后给监听该元素的…

【方法】如何把Excel“只读方式”变成可直接编辑?

Excel在“只读方式”下&#xff0c;编辑后是无法直接保存原文件的&#xff0c;那如何可以直接编辑原文件呢&#xff1f;下面来一起看看看吧。 如果Excel设置的是无密码的“只读方式”&#xff0c;那在打开Excel后&#xff0c;会出现对话框&#xff0c;提示“是否以只读方式打开…

生成随机数C++

随机数生成 在C中&#xff0c;有多种方式可以生成和输出随机数。以下是几种常见的方式&#xff1a; 1. 使用 <cstdlib> 头文件中的 rand() 函数&#xff1a; #include <iostream> #include <cstdlib> #include <ctime>int main() {// 设置种子&…