indexDB入门到精通

前言
由于开发3D可视化项目经常用到模型，而一个模型通常是几m甚至是几十m的大小对于一般的服务器来讲加载速度真的十分的慢，为了解决这个加载速度的问题，我想到了几个本地存储的。

首先是cookie,cookie肯定是不行的，因为最多以只能存4k，

其次localStorage，最多能存5m(不是一个key的大小，是所有key的总大小最多加起来最多5m)，相对于cookie已经打了很多了。但是当遇到大模型还是不够，实际开发中大部分模型都是10m-30m的。

经过网上的相关资料的搜索了解到了indexDB，indexD就正好合适了，因为我发现我常用的3d框架three.js他们也是使用indexDB去做存储，而且存储大小是250m以上（受计算机硬件和浏览器厂商的限制）。

一、直接上代码更看结果更直观

懒人直接看入门的全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><title>Title</title><link href="./favicon.png">
</head>
<body>
</body>
<script>let dbName = 'helloIndexDB', version = 1, storeName = 'helloStore'let indexedDB = window.indexedDBlet dbconst request = indexedDB.open(dbName, version)request.onsuccess = function(event) {db = event.target.result // 数据库对象console.log('数据库打开成功')}request.onerror = function(event) {console.log('数据库打开报错')}request.onupgradeneeded = function(event) {// 数据库创建或升级的时候会触发console.log('onupgradeneeded')db = event.target.result // 数据库对象let objectStoreif (!db.objectStoreNames.contains(storeName)) {objectStore = db.createObjectStore(storeName, { keyPath: 'id' }) // 创建表// objectStore.createIndex('name', 'name', { unique: true }) // 创建索引 可以让你搜索任意字段}}// 添加数据function addData(db, storeName, data) {let request = db.transaction([storeName], 'readwrite') // 事务对象 指定表格名称和操作模式（"只读"或"读写"）.objectStore(storeName) // 仓库对象.add(data)request.onsuccess = function(event) {console.log('数据写入成功')}request.onerror = function(event) {console.log('数据写入失败')throw new Error(event.target.error)}}// 根据id获取数据function getDataByKey(db, storeName, key) {let transaction = db.transaction([storeName]) // 事务let objectStore = transaction.objectStore(storeName) // 仓库对象let request = objectStore.get(key)request.onerror = function(event) {console.log('事务失败')}request.onsuccess = function(event) {console.log('主键查询结果: ', request.result)}}// 根据id修改数function updateDB(db, storeName, data) {let request = db.transaction([storeName], 'readwrite') // 事务对象.objectStore(storeName) // 仓库对象.put(data)request.onsuccess = function() {console.log('数据更新成功')}request.onerror = function() {console.log('数据更新失败')}}// 根据id删除数据function deleteDB(db, storeName, id) {let request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(id)request.onsuccess = function() {console.log('数据删除成功')}request.onerror = function() {console.log('数据删除失败')}}// 由于打开indexDB是异步的加个定时器避免 db对象还没获取到值导致 报错setTimeout(() => {addData(db, storeName, {id: new Date().getTime(), // 必须且值唯一name: '张三',age: 18,desc: 'helloWord'})getDataByKey(db, storeName, 1638160036008)updateDB(db, storeName, {id: 1638164880484, desc: '修改的内容'})deleteDB(db, storeName, 1638164870439)}, 1000)</script>
</html>

第一步：准备环境和基本的html页面

 基本的html代码

​<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><title>Title</title>
</head>
<body>
</body>
<script></script>
</html>

第二步：打开数据库（如果没有自动创建）

  let dbName = 'helloIndexDB', version = 1, storeName = 'helloStore'let indexedDB = window.indexedDBlet dbconst request = indexedDB.open(dbName, version)request.onsuccess = function(event) {db = event.target.result // 数据库对象console.log('数据库打开成功')}request.onerror = function(event) {console.log('数据库打开报错')}request.onupgradeneeded = function(event) {// 数据库创建或升级的时候会触发console.log('onupgradeneeded')db = event.target.result // 数据库对象let objectStoreif (!db.objectStoreNames.contains(storeName)) {objectStore = db.createObjectStore(storeName, { keyPath: 'id' }) // 创建表// objectStore.createIndex('name', 'name', { unique: true }) // 创建索引 可以让你搜索任意字段}}

运行如上面的代码后打开控制台可以看到如下效果，数据库已经创建完成了，此时什么数据都没有

watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reL6Zuo5LiA55u06LWwfg==,size_19,color_FFFFFF,t_70,g_se,x_16

第三步：存入一个helloWorld 

  // 添加数据function addData(db, storeName, data) {let request = db.transaction([storeName], 'readwrite') // 事务对象 指定表格名称和操作模式（"只读"或"读写"）.objectStore(storeName) // 仓库对象.add(data)request.onsuccess = function(event) {console.log('数据写入成功')}request.onerror = function(event) {console.log('数据写入失败')throw new Error(event.target.error)}}// 由于打开indexDB是异步的加个定时器避免 db对象还没获取到值导致 报错setTimeout(() => {addData(db, storeName, {id: new Date().getTime(), // 必须且值唯一name: '张三',age: 18,desc: 'helloWord'})}, 1000)

刷新页面后可以看到如下结果,此时我这里已经存进去了，（我刷新了两次所以有两条数据）

watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reL6Zuo5LiA55u06LWwfg==,size_20,color_FFFFFF,t_70,g_se,x_16

 第四步：封装删除，查询，修改方法并分别执行查看结果

 // 根据id获取数据function getDataByKey(db, storeName, key) {let transaction = db.transaction([storeName]) // 事务let objectStore = transaction.objectStore(storeName) // 仓库对象let request = objectStore.get(key)request.onerror = function(event) {console.log('事务失败')}request.onsuccess = function(event) {console.log('主键查询结果: ', request.result)}}// 根据id修改数function updateDB(db, storeName, data) {let request = db.transaction([storeName], 'readwrite') // 事务对象.objectStore(storeName) // 仓库对象.put(data)request.onsuccess = function() {console.log('数据更新成功')}request.onerror = function() {console.log('数据更新失败')}}// 根据id删除数据function deleteDB(db, storeName, id) {let request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(id)request.onsuccess = function() {console.log('数据删除成功')}request.onerror = function() {console.log('数据删除失败')}}// 由于打开indexDB是异步的加个定时器避免 db对象还没获取到值导致 报错setTimeout(() => {// addData(db, storeName, {//   id: new Date().getTime(), // 必须且值唯一//   name: '张三',//   age: 18,//   desc: 'helloWord'// })getDataByKey(db, storeName, 1638160036008)updateDB(db, storeName, {id: 1638164880484, desc: '修改的内容'})deleteDB(db, storeName, 1638164870439)}, 1000)

执行上面的代码后结果后，我这边的结果如下，

watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5reL6Zuo5LiA55u06LWwfg==,size_20,color_FFFFFF,t_70,g_se,x_16

 二、封装indexDB库，

第一步：封装类库

/*** 封装的方法以及用法* 打开数据库*/
export function openDB(dbName, storeName, version = 1) {return new Promise((resolve, reject) => {let indexedDB = window.indexedDBlet dbconst request = indexedDB.open(dbName, version)request.onsuccess = function(event) {db = event.target.result // 数据库对象resolve(db)}request.onerror = function(event) {reject(event)}request.onupgradeneeded = function(event) {// 数据库创建或升级的时候会触发console.log('onupgradeneeded')db = event.target.result // 数据库对象let objectStoreif (!db.objectStoreNames.contains(storeName)) {objectStore = db.createObjectStore(storeName, { keyPath: 'id' }) // 创建表// objectStore.createIndex('name', 'name', { unique: true }) // 创建索引 可以让你搜索任意字段}}})
}/*** 新增数据*/
export function addData(db, storeName, data) {return new Promise((resolve, reject) => {let request = db.transaction([storeName], 'readwrite') // 事务对象 指定表格名称和操作模式（"只读"或"读写"）.objectStore(storeName) // 仓库对象.add(data)request.onsuccess = function(event) {resolve(event)}request.onerror = function(event) {throw new Error(event.target.error)reject(event)}})
}/*** 通过主键读取数据*/
export function getDataByKey(db, storeName, key) {return new Promise((resolve, reject) => {let transaction = db.transaction([storeName]) // 事务let objectStore = transaction.objectStore(storeName) // 仓库对象let request = objectStore.get(key)request.onerror = function(event) {reject(event)}request.onsuccess = function(event) {resolve(request.result)}})
}/*** 通过游标读取数据*/
export function cursorGetData(db, storeName) {let list = []let store = db.transaction(storeName, 'readwrite') // 事务.objectStore(storeName) // 仓库对象let request = store.openCursor() // 指针对象return new Promise((resolve, reject) => {request.onsuccess = function(e) {let cursor = e.target.resultif (cursor) {// 必须要检查list.push(cursor.value)cursor.continue() // 遍历了存储对象中的所有内容} else {resolve(list)}}request.onerror = function(e) {reject(e)}})
}/*** 通过索引读取数据*/
export function getDataByIndex(db, storeName, indexName, indexValue) {let store = db.transaction(storeName, 'readwrite').objectStore(storeName)let request = store.index(indexName).get(indexValue)return new Promise((resolve, reject) => {request.onerror = function(e) {reject(e)}request.onsuccess = function(e) {resolve(e.target.result)}})
}/*** 通过索引和游标查询记录*/
export function cursorGetDataByIndex(db, storeName, indexName, indexValue) {let list = []let store = db.transaction(storeName, 'readwrite').objectStore(storeName) // 仓库对象let request = store.index(indexName) // 索引对象.openCursor(IDBKeyRange.only(indexValue)) // 指针对象return new Promise((resolve, reject) => {request.onsuccess = function(e) {let cursor = e.target.resultif (cursor) {list.push(cursor.value)cursor.continue() // 遍历了存储对象中的所有内容} else {resolve(list)}}request.onerror = function(ev) {reject(ev)}})
}/*** 更新数据*/
export function updateDB(db, storeName, data) {let request = db.transaction([storeName], 'readwrite') // 事务对象.objectStore(storeName) // 仓库对象.put(data)return new Promise((resolve, reject) => {request.onsuccess = function(ev) {resolve(ev)}request.onerror = function(ev) {resolve(ev)}})
}/*** 删除数据*/
export function deleteDB(db, storeName, id) {let request = db.transaction([storeName], 'readwrite').objectStore(storeName).delete(id)return new Promise((resolve, reject) => {request.onsuccess = function(ev) {resolve(ev)}request.onerror = function(ev) {resolve(ev)}})
}/*** 删除数据库*/
export function deleteDBAll(dbName) {console.log(dbName)let deleteRequest = window.indexedDB.deleteDatabase(dbName)return new Promise((resolve, reject) => {deleteRequest.onerror = function(event) {console.log('删除失败')}deleteRequest.onsuccess = function(event) {console.log('删除成功')}})
}/*** 关闭数据库*/
export function closeDB(db) {db.close()console.log('数据库已关闭')
}export default {openDB,addData,getDataByKey,cursorGetData,getDataByIndex,cursorGetDataByIndex,updateDB,deleteDB,deleteDBAll,closeDB
}

第二步：使用类库，该库的使用方法如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><title>Title</title><link href="./favicon.png">
</head>
<body>
</body>注意要加 type="module"
<script type="module">
-->
<script type="module">import IndexDB from './IndexDB.js'(async function() {const dbName = 'myDB', storeName = 'db_1'const db = await IndexDB.openDB(dbName, storeName, 1)var data = await IndexDB.addData(db, storeName, {id: 111, // 必须且值唯一name: '张三',age: 18,desc: 'helloWord'})console.log(data)var data = await IndexDB.getDataByKey(db, storeName, 111)console.log(data)var data = await IndexDB.updateDB(db, storeName, { id: 111, desc: '修改的内容' })console.log(data)var data = await IndexDB.deleteDB(db, storeName, 111)console.log(data)})()
</script>
</html>

三、使用indexdb第三方类库indexdbwrapper(这种方式需要懂得使用打包工具开发不懂跳过)

/* 下载cnpm install --save indexdbwrapper
*/
// 引入
import IndexDBWrapper from 'indexdbwrapper'
// 使用
async function dbTest() {const dbName = 'dbName', storeName = 'storeName', version = 1const db = new IndexDBWrapper(dbName, version, {onupgradeneeded(event) {const db = event.target.result // 数据库对象let objectStoreif (!db.objectStoreNames.contains(storeName)) {objectStore = db.createObjectStore(storeName, { keyPath: 'id' }) // 创建表// objectStore.createIndex('createTime', 'createTime', { unique: false }) // 创建索引 可以让你搜索任意字段}}})await db.open()await db.add(storeName, { id: new Date().getTime(), updateTime: new Date().getTime() })console.log(await db.get(storeName, 1639015754840))console.log(await db.put(storeName, { id: 1639015754840, put: 'put2' }))console.log(await db.get(storeName, 1639015754840))console.log(await db.delete(storeName, 1639015754840))// console.log(await db.clear(storeName))
}
dbTest()

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

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

相关文章

【项目实践】基于LSTM的一维数据扩展与预测

【项目实践】基于LSTM的一维数据扩展与预测

基于LSTM的一维数据拟合扩展 一、引(fei)言(hua) 我在做Sri Lanka生态系统服务价值计算时&#xff0c;中间遇到了一点小问题。从世界粮农组织(FAO)上获得Sri Lanka主要农作物产量和价格数据时&#xff0c;其中的主要作物Sorghum仅有2001-2006年的数据&#xff0c;而Millet只有…
阅读更多...
常用的Selenium基础使用模板和简单封装

常用的Selenium基础使用模板和简单封装

前言 近来又用上了 Selneium &#xff0c;因为反复用到&#xff0c;所以在这里将一些常用的方法封装起来&#xff0c;方便后续的使用。 在这篇文章中&#xff0c;我们将探讨 Selenium 的基础模板和基础封装&#xff0c;以便更好地理解 Selenium 的使用方法。 在Selenium的使…
阅读更多...
MyBatisPlus入门

MyBatisPlus入门

入门&#xff1a; 依赖&#xff1a; <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>{version}</version> </dependency> 配置&#xff1a; ## 去除logo …
阅读更多...
无涯教程-PHP - 标量函数声明

无涯教程-PHP - 标量函数声明

在PHP 7中&#xff0c;引入了一个新函数&#xff0c;即标量类型声明。标量类型声明有两个选项- Coercive - 强制性是默认模式。Strict - 严格模式必须明确提示。 可以使用上述模式强制执行以下类型的函数参数- intfloatbooleanstringinterfacesarraycallable 强制模…
阅读更多...
opencv 进阶15-检测DoG特征并提取SIFT描述符cv2.SIFT_create()

opencv 进阶15-检测DoG特征并提取SIFT描述符cv2.SIFT_create()

前面我们已经了解了Harris函数来进行角点检测&#xff0c;因为角点的特性&#xff0c;这些角点在图像旋转的时候也可以被检测到。但是&#xff0c;如果我们放大或缩小图像时&#xff0c;就可能会丢失图像的某些部分&#xff0c;甚至有可能增加角点的质量。这种损失的现象需要一…
阅读更多...
Revit 3D高效处理：cad exchanger sdk 3.21 Crack

Revit 3D高效处理：cad exchanger sdk 3.21 Crack

3D 格式概述&#xff1a;Revit Revit 已成为寻求高效、准确的建筑信息建模的专业人士的首选解决方案。在这篇引人入胜的功能概述中了解 Revit 的特性和影响。 什么是Revit&#xff1f; Autodesk Revit 是一款流行的 CAD 软件&#xff0c;重点关注 BIM&#xff0c;被建筑师、工…
阅读更多...
C++入门：引用是什么

C++入门：引用是什么

目录 1.引用的概念 2.引用的特征 3.常引用 4.引用使用场景 5.传值&#xff0c;传引用效率比较 6.引用与指针的区别 1.引用的概念 引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;编译器不会为引用变量开辟内存空 间&#xff0c;它和它引用…
阅读更多...
AUTBUS全球首发，东土与您相约工博会

AUTBUS全球首发，东土与您相约工博会

2023年中国国际工业博览会将于9月19日至9月23日在上海盛大举办。作为工博会重点参展企业之一&#xff0c;东土科技将重磅亮相6.1号馆工业自动化展&#xff08;展位号&#xff1a;6.1H-D137&#xff09;。 值得一提的是&#xff0c;AUTBUS 国际标准作为全球第一个基于时间敏感网…
阅读更多...
LLMs 缩放法则和计算最优模型Scaling laws and compute-optimal models

LLMs 缩放法则和计算最优模型Scaling laws and compute-optimal models

在上一个视频中&#xff0c;您探讨了训练大型语言模型的计算挑战。在这里&#xff0c;您将了解关于模型大小、训练、配置和性能之间关系的研究&#xff0c;以确定模型需要多大。请记住&#xff0c;预训练期间的目标是最大化模型的学习目标性能&#xff0c;即在预测令牌时最小化…
阅读更多...
LeetCode--HOT100题（38）

LeetCode--HOT100题（38）

目录 题目描述&#xff1a;226. 翻转二叉树&#xff08;简单&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;226. 翻转二叉树&#xff08;简单&#xff09; 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 LeetCode做题链…
阅读更多...
pytorch 入门1-tensor 广播 view reshape

pytorch 入门1-tensor 广播 view reshape

tensor 的四则运算broadcast import torch import numpy as np # 张量tensor 随机初始化 x torch.rand(4,3) print(x) y torch.randn(4,3) print(y)# 初始化全零 张量 a torch.zeros((4,4),dtypetorch.long) print(a) #初始化全一 张量 b torch.ones(4,4) print(b) c tor…
阅读更多...
多客户企业选择拥有哪些功能的CRM系统？

多客户企业选择拥有哪些功能的CRM系统？

管理海量客户信息对于每一家企业都是巨大的挑战。粗放式的管理客户资料是对资源的一种浪费&#xff0c;让很多有意向的高价值客户流失。客户比较多&#xff0c;有什么CRM系统推荐吗&#xff1f;帮助企业轻松地跟进客户&#xff0c;提高销售效率&#xff1f; 1.易于使用 首先是…
阅读更多...
macOS Ventura 13.5.1（22G90）发布（附黑/白苹果系统镜像地址）

macOS Ventura 13.5.1（22G90）发布（附黑/白苹果系统镜像地址）

系统镜像下载&#xff1a;百度&#xff1a;黑果魏叔 系统介绍 黑果魏叔 8 月 18 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 13.5.1 更新&#xff08;内部版本号&#xff1a;22G90&#xff09;&#xff0c;本次更新距离上次发布隔了 24 天。 本次更新重点修复了…
阅读更多...
Docker部署MongoDB 5.0.5

Docker部署MongoDB 5.0.5

1、查看目录 rootwielun:~# tree mongo mongo ├── conf │ └── mongod.conf ├── data ├── docker-compose.yml └── logrootwielun:~# cd mongo rootwielun:~/mongo# chmod 777 log2、配置docker-compose.yml rootwielun:~/mongo# cat docker-compose.yml ve…
阅读更多...
【ES6】—【必备知识】—扩展运算符与rest参数

【ES6】—【必备知识】—扩展运算符与rest参数

一、扩展运算符 1. 定义&#xff1a;把数组或类数组展开成用逗号隔开的值 function foo(a,b,c) {console.log(a,b,c) } let arr [1,2,3] foo(...arr)2. 把两个数组合并 2-1. ES5 实现 let arr1 [1,2,3] let arr2 [4,5,6] Array.prototype.push.apply(arr1, arr2) consol…
阅读更多...
多线程+隧道代理：提升爬虫速度

多线程+隧道代理：提升爬虫速度

在进行大规模数据爬取时&#xff0c;爬虫速度往往是一个关键问题。本文将介绍一个提升爬虫速度的秘密武器&#xff1a;多线程隧道代理。通过合理地利用多线程技术和使用隧道代理&#xff0c;我们可以显著提高爬虫的效率和稳定性。本文将为你提供详细的解决方案和实际操作价值&a…
阅读更多...
文心一言 VS 讯飞星火 VS chatgpt （80）-- 算法导论7.4 5题

文心一言 VS 讯飞星火 VS chatgpt （80）-- 算法导论7.4 5题

五、如果用go语言&#xff0c;当输入数据已经“几乎有序”时&#xff0c;插入排序速度很快。在实际应用中&#xff0c;我们可以利用这一特点来提高快速排序的速度。当对一个长度小于 k 的子数组调用快速排序时&#xff0c;让它不做任何排序就返回。当上层的快速排序调用返回后&…
阅读更多...
国产精品：讯飞星火最新大模型V2.0

国产精品：讯飞星火最新大模型V2.0

大家好&#xff0c;我是爱编程的喵喵。双985硕士毕业&#xff0c;现担任全栈工程师一职&#xff0c;热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…
阅读更多...
ethers.js2：provider提供商

ethers.js2：provider提供商

1、Provider类 Provider类是对以太坊网络连接的抽象&#xff0c;为标准以太坊节点功能提供简洁、一致的接口。在ethers中&#xff0c;Provider不接触用户私钥&#xff0c;只能读取链上信息&#xff0c;不能写入&#xff0c;这一点比web3.js要安全。 除了之前介绍的默认提供者d…
阅读更多...
VMware 使用U盘进入PE系统，下划线光标闪烁

VMware 使用U盘进入PE系统，下划线光标闪烁

一、前言 vmware虚拟机各种原因崩溃&#xff0c;然后又没有快照&#xff0c;怎么办&#xff1f; 或者 密码忘记了无法开机&#xff0c;这时候就想到使用PE了。 二、分析 但是使用U盘进入PE的时候&#xff0c;遇到了各种问题&#xff1a; 加载U盘修改启动顺序启动后出现下划线…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023