indexedDB笔记

indexedDB

该部分内容主要源于https://juejin.cn/post/7026900352968425486

  • 常用场景：大量数据需要缓存在本地
  • 重要概念
    • 仓库objectStore：类似于数据库中的表，数据存储媒介
    • 索引index：索引作为数据的标志量，可根据索引获取对应值
    • 游标cursor：数据的遍历工具

1.创建数据库

/*** 打开数据库* @param {string} dbName 数据库的名字* @param {string} storeName 仓库名称* @param {string} version 数据库的版本* @return {object} 返回一个数据库实例*/
function openDB(dbName, version = 1) {return new Promise((resolve, reject) => {var indexedDB =window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;const request = indexedDB.open(dbName, version);// 数据库打开成功回调request.onsuccess = function (event) {let db = event.target.result;console.log("数据库打开成功");resolve(db);};// 数据库打开失败的回调request.onerror = function () {console.log("数据库打开报错");reject()};// 数据库创建或版本更新时触发request.onupgradeneeded = function (event) {console.log("onupgradeneeded");let db = event.target.result;// 创建仓库let objectStore = db.createObjectStore("store", {keyPath: "id", // 这是主键// autoIncrement: true // 实现自增});// 创建索引，在后面查询数据的时候可以根据索引查objectStore.createIndex("id", "id", {unique: false});};});
}

2.关闭数据库

/*** 关闭数据库* @param {object} db 数据库实例*/
function closeDB(db) {db.close();console.log("数据库已关闭");
}

3.删除数据库

/*** 删除数据库* @param {object} dbName 数据库名称*/
function deleteDB(dbName) {let deleteRequest = window.indexedDB.deleteDatabase(dbName);deleteRequest.onerror = function () {console.log("删除失败");};deleteRequest.onsuccess = function () {console.log("删除成功");};
}

4.新增数据

/*** 新增数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {object} data 数据（键值对格式，必须包含主键与索引字段）*/
function addData(db, storeName, data) {// 创建事务对象，指定表格名称和操作模式（"只读"或"读写"）let transaction = db.transaction([storeName], "readwrite")// 获取仓库对象let store = transaction.objectStore(storeName)// 执行插入操作let request = store.add(data)request.onsuccess = function () {console.log("数据写入成功");};request.onerror = function () {console.log("数据写入失败");};
}

5.更新数据

/*** 更新数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {object} data 数据*/
function updateData(db, storeName, data) {let transaction = db.transaction([storeName], "readwrite")let store = transaction.objectStore(storeName)let request = store.put(data); // 如果没有该数据则为新增request.onsuccess = function () {console.log("数据更新成功");};request.onerror = function () {console.log("数据更新失败");};
}

6.根据主键删除数据

/*** 通过主键删除数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {object} id 主键值*/
function delData(db, storeName, id) {let transaction = db.transaction([storeName], "readwrite")let store = transaction.objectStore(storeName)let request = store.delete(id)request.onsuccess = function () {console.log("数据删除成功");};request.onerror = function () {console.log("数据删除失败");};
}

7.根据索引值删除数据

/*** 通过索引和游标删除指定的数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {string} indexName 索引名* @param {object} indexValue 索引值*/
function cursorDelete(db, storeName, indexName, indexValue) {let transaction = db.transaction(storeName, "readwrite")let store = transaction.objectStore(storeName)let request = store.index(indexName).openCursor(IDBKeyRange.only(indexValue));request.onsuccess = function (e) {let cursor = e.target.result;let deleteRequest;if (cursor) {deleteRequest = cursor.delete(); // 请求删除当前项deleteRequest.onerror = function () {console.log("游标删除该记录失败");};deleteRequest.onsuccess = function () {console.log("游标删除该记录成功");};cursor.continue();}};request.onerror = function () {console.log('事务失败')};
}

8.通过游标获取全量数据

/*** 通过游标获取全量数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称*/
function getAllData(db, storeName) {return new Promise((resolve, reject) => {let list = []let transaction = db.transaction(storeName, "readwrite")let store = transaction.objectStore(storeName)let request = store.openCursor()// 游标开启成功，逐行读数据request.onsuccess = function (e) {let cursor = e.target.result// 必须要检查if (cursor) {list.push(cursor.value);cursor.continue(); // 遍历存储对象中的所有内容} else {console.log("游标读取的数据：", list);resolve(list)}};request.onerror = function () {console.log("事务失败");reject()};})
}

9.通过主键获取数据

/*** 通过主键获取数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {string} key 主键值（创建时声明的keypath字段）*/
function getDataByKey(db, storeName, key) {return new Promise((resolve, reject) => {var transaction = db.transaction([storeName]);var store = transaction.objectStore(storeName);var request = store.get(key);request.onsuccess = function () {// 仅查询一条数据console.log("主键查询结果: ", request.result);resolve(request.result);};request.onerror = function () {console.log("事务失败");reject()};});
}

10.通过索引获取数据

/*** 通过索引获取数据* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {string} indexName 索引名称* @param {string} indexValue 索引值*/
function getDataByIndex(db, storeName, indexName, indexValue) {return new Promise((resolve, reject) => {let transaction = db.transaction(storeName, "readwrite")let store = transaction.objectStore(storeName)let request = store.index(indexName).get(indexValue)request.onsuccess = function (e) {// 所有符合索引值的数据let result = e.target.resultconsole.log("索引查询结果：", result)resolve(result)};request.onerror = function () {console.log("事务失败")reject()};})
}

11.通过索引与游标结合筛选数据

/*** 通过索引和游标查询记录* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {string} indexName 索引名称* @param {string} indexValue 索引值*/
function cursorGetDataByIndex(db, storeName, indexName, indexValue) {return new Promise((resolve, reject) => {let list = []let transaction = db.transaction(storeName, "readwrite")let store = transaction.objectStore(storeName);let request = store.index(indexName).openCursor(IDBKeyRange.only(indexValue))request.onsuccess = function (e) {let cursor = e.target.resultif (cursor) {// 区别于根据索引获取数据，此处可引入筛选相关逻辑list.push(cursor.value);cursor.continue();} else {console.log("游标索引查询结果：", list);resolve(list)}};request.onerror = function () {console.log("事务失败")reject()};})
}

12.通过索引和游标分页查询

/*** 通过索引和游标分页查询记录* @param {object} db 数据库实例* @param {string} storeName 仓库名称* @param {string} indexName 索引名称* @param {string} indexValue 索引值* @param {number} page 页码* @param {number} pageSize 查询条数*/
function cursorGetDataByIndexAndPage(db,storeName,indexName,indexValue,page,pageSize
) {return new Promise((resolve, reject) => {let list = [];let counter = 0; // 计数器let advanced = true; // 是否跳过多少条查询let transaction = db.transaction(storeName, "readwrite")let store = transaction.objectStore(storeName)var request = store.index(indexName).openCursor(IDBKeyRange.only(indexValue))request.onsuccess = function (e) {var cursor = e.target.result;if (page > 1 && advanced) {advanced = false;cursor.advance((page - 1) * pageSize); // 跳过多少条return;}if (cursor) {list.push(cursor.value);counter++;if (counter < pageSize) cursor.continue()else {cursor = null;console.log("分页查询结果", list);}} else {console.log("分页查询结果", list);resolve(list)}};request.onerror = function () {console.log("事务失败");reject()};})
}

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

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

相关文章

次小生成树学习笔记

次小生成树学习笔记

次小生成树有严格次小生成树和非严格次小生成树之分。常见的是严格次小生成树。 严格次小生成树的定义如下&#xff1a; 如果最小生成树选择的边集是 E M E_M EM​&#xff0c;严格次小生成树选择的边集是 E S E_S ES​&#xff0c;那么需要满足&#xff1a;( v a l u e ( e…
阅读更多...
Spring Boot 面试题——常用注解

Spring Boot 面试题——常用注解

目录 Spring Bean将一个类声明为 Bean自动装配 Bean声明 Bean 的作用域 前端后传值处理常见的 HTTP 请求类型读取配置文件定时任务全局 Controller 层异常处理 Spring Bean 将一个类声明为 Bean Component&#xff1a;通用的注解&#xff0c;可标注任意类为 Spring 组件。如果…
阅读更多...
【入门Flink】- 04Flink部署模式和运行模式【偏概念】

【入门Flink】- 04Flink部署模式和运行模式【偏概念】

部署模式 在一些应用场景中&#xff0c;对于集群资源分配和占用的方式&#xff0c;可能会有特定的需求。Flink为各种场景提供了不同的部署模式&#xff0c;主要有以下三种&#xff1a;会话模式&#xff08;Session Mode&#xff09;、单作业模式&#xff08;Per-Job Mode&…
阅读更多...
小程序如何设置用户同意服务协议并上传头像和昵称

小程序如何设置用户同意服务协议并上传头像和昵称

为了保护用户权益和提供更好的用户体验&#xff0c;设置一些必填项和必读协议是非常必要的。首先&#xff0c;用户必须阅读服务协议。服务协议是明确规定用户和商家之间权益和义务的文件。通过要求用户在下单前必须同意协议&#xff0c;可以确保用户在使用服务之前了解并同意相…
阅读更多...
【机器学习】随机森林

【机器学习】随机森林

随机森林 文章目录 随机森林1. 什么是集成学习方法2. 随机森林3. 随机森林工作过程4. API5. 总结 1. 什么是集成学习方法 集成学习方法通过建立几个模型组合来解决单一预测问题。它的工作原理就是生成多个分类器/模型&#xff0c;各自独立地学习和做出预测。这些预测最后结合成…
阅读更多...
分析：如何多线程运行测试用例

分析：如何多线程运行测试用例

这是时常被问到的问题&#xff0c;尤其是UI自动化的运行&#xff0c;过程非常耗时&#xff0c;所以&#xff0c;所以多线程不失为一种首先想到的解决方案。 多线程是针对的测试用例&#xff0c;所以和selenium没有直接关系&#xff0c;我们要关心的是单元测试框架。 unittest …
阅读更多...
Spring IOC - Spring启动过程解析

Spring IOC - Spring启动过程解析

Spring启动流程的核心逻辑主要体现在方法AbstractApplicationContext#refresh中&#xff0c;该方法没有被子类重写。 本文主要从宏观层面对其进行剖析&#xff0c;从整体上感知。各执行步骤和作用按先后顺序如下表所示&#xff0c;其中标红方法为核心方法&#xff0c;标绿色方法…
阅读更多...
[GDOUCTF 2023]＜ez_ze＞ SSTI 过滤数字 大括号{等

[GDOUCTF 2023]＜ez_ze＞ SSTI 过滤数字 大括号{等

SSTI模板注入-中括号、args、下划线、单双引号、os、request、花括号、数字被过滤绕过&#xff08;ctfshow web入门370&#xff09;-CSDN博客 ssti板块注入 正好不会 {%%}的内容 学习一下 经过测试 发现过滤了 {{}} 那么我们就开始吧 我们可以通过这个语句来查询是否存在ss…
阅读更多...
免费亲人微信聊天记录提取软件新版本v1.1，使用说明，注意事项 2023.11.06

免费亲人微信聊天记录提取软件新版本v1.1，使用说明，注意事项 2023.11.06

V 1.1 优化了备份速度&#xff0c;新增了备份消息类型的选型&#xff0c;可以选择仅仅备份文本&#xff0c;或者文本与音频&#xff0c;或者文本音频视频图片。 有什么办法可以导出与某个人的微信聊天记录&#xff1f; 只想导出与某个微信好友的聊天记录&#xff0c;有办法做到…
阅读更多...
内网服务器（不通外网）访问高德在线地图服务的方法

内网服务器（不通外网）访问高德在线地图服务的方法

在项目部署过程中&#xff0c;若部署服务器处于内网环境&#xff0c;则无法调用高德服务。需要通过搭建代理实现请求的转发&#xff0c;从而获取到在线服务内容。下面的记录解决了内网服务器访问高德地图服务的问题。 一、所需设备 内网服务器&#xff08;项目所需部署环境&a…
阅读更多...
运维知识点-MySQL从小白到入土

运维知识点-MySQL从小白到入土

MySQL从小白到入土 mysql 服务器安装windows mysql 服务漏洞复现-mysql jdbc反序列化-权限绕过 mysql 服务器安装 https://dev.mysql.com/downloads/mysql/https://www.cnblogs.com/xiaostudy/p/12262804.html 点餐小程序腾讯云服务器安装mysql8 windows mysql 服务 net sta…
阅读更多...
1.UML面向对象类图和关系

1.UML面向对象类图和关系

文章目录 4种静态结构图类图类的表示类与类之间的关系依赖关系(Dependency)关联关系(Association)聚合(Aggregation)组合(Composition)实现(Realization)继承/泛化(Inheritance/Generalization)常用的UML工具reference欢迎访问个人网络日志🌹🌹知行空间🌹🌹 4种静态结构…
阅读更多...
cp没有--exclude选项！Linux复制文件夹时如何排除一些文件？

cp没有--exclude选项！Linux复制文件夹时如何排除一些文件？

之前使用tar命令压缩文件将时&#xff0c;使用了–exclude选项排除了一些不需要的文件。现在我想复制一个文件夹&#xff0c;但是其中一些文件不需要复制&#xff0c;此时注意到cp命令居然没有–exclude选项。 rsync可以快速地帮助我们完成相同的事情&#xff0c;命令如下&…
阅读更多...
rust 基础数据类型

rust 基础数据类型

默认类型 大部分情况下&#xff0c;rust 可以基于上下文自动推导出变量的类型。下面代码中&#xff0c;变量 x 没有显式&#xff0c;rust 默认是 i32 类型。 fn main() {let x 5; }但也有一些例外情况&#xff0c;比如&#xff0c;字符串类型的转换中变量 x 的类型&#xff…
阅读更多...
【Java 进阶篇】JSP 简单入门

【Java 进阶篇】JSP 简单入门

在现代Web开发中&#xff0c;JavaServer Pages&#xff08;JSP&#xff09;是一项非常重要的技术。JSP允许开发者将Java代码嵌入HTML页面&#xff0c;以实现动态内容的生成和呈现。本文将详细介绍JSP的概念、原理以及如何使用JSP来构建Web应用程序。 第一部分&#xff1a;JSP …
阅读更多...
如何将 XxlJob 集成达梦数据库

如何将 XxlJob 集成达梦数据库

1. 前言 在某些情况下&#xff0c;你的项目可能会面临数据库选择的特殊要求&#xff0c;随着国产化的不断推进&#xff0c;达梦数据库是一个常见的选择。本篇博客将教你如何解决 XxlJob 与达梦数据库之间的 SQL 兼容性问题&#xff0c;以便你的任务调度系统能够在这个数据库中…
阅读更多...
章鱼网络进展月报 | 2023.10.1-10.31

章鱼网络进展月报 | 2023.10.1-10.31

章鱼网络大事摘要 1、Louis 成功竞选 NDC 的 HoM 议席&#xff0c;将会尽最大努力推动 NEAR 变革。2、章鱼网络受邀参加在土耳其主办的 Cosmoverse2023&#xff0c;分享 Adaptive IBC 的技术架构。3、2023年10月8日章鱼日&#xff0c;是章鱼网络主网上线2周年的纪念日。 …
阅读更多...
机器学习---SVM目标函数求解，SMO算法

机器学习---SVM目标函数求解，SMO算法

1. 线性可分支持向量机 1.1 定义输入数据 假设给定⼀个特征空间上的训练集为&#xff1a; 其中&#xff0c;(x , y )称为样本点。 x 为第i个实例&#xff08;样本&#xff09;。 y 为x 的标记&#xff1a; 当y 1时&#xff0c;x 为正例&#xff1b;当y −1时&#xff0c;x…
阅读更多...
vue3项目实践

vue3项目实践

创建 vue3 项目 node本版&#xff1a;node 16.x.x&#xff0c; 脚手架&#xff1a;create-vue 脚手架工具&#xff0c;底层vite 创建vue3项目&#xff1a;npm init vuelatest setup函数 vue3 单文件组件 1、vite.config.js配置文件基于vite的配置 2、template模板不再要求唯…
阅读更多...
NOIP2023模拟10联测31 游戏

NOIP2023模拟10联测31 游戏

题目大意 Alice \text{Alice} Alice和 Bob \text{Bob} Bob在玩一个游戏&#xff1a;有一个由正整数组成的集合 S S S&#xff0c;两人轮流从中选数&#xff0c; Alice \text{Alice} Alice先手。每次一个人可以从当前集合中选一个数 x x x&#xff0c;把 x x x以及 x x x在集合中…
阅读更多...
最新文章

Copyright @ 2022~2023