indexDB入门到精通,indexdb增删查改,封装indexdb类库,indexdb基本使用
目录
前言
一、直接上代码更看结果更直观
第一步:准备环境和基本的html页面
第二步:打开数据库(如果没有自动创建)
第三步:存入一个helloWorld
第四步:封装删除,查询,修改方法并分别执行查看结果
二、封装indexDB库,
第一步:封装类库
第二步:使用类库,该库的使用方法如下
三、使用第三方类库
前言
由于开发3D可视化项目经常用到模型,而一个模型通常是几m甚至是几十m的大小对于一般的服务器来讲加载速度真的十分的慢,为了解决这个加载速度的问题,我想到了几个本地存储的。
首先是cookie,cookie肯定是不行的,因为最多以只能存4k,
其次localStorage,最多能存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页面
这里需要一个服务器容器打开页面,我这里使用webstrom自带的,路径地址要是有ip地址或者localhost加端口好的格式,
基本的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 }) // 创建索引 可以让你搜索任意字段}}
运行如上面的代码后打开控制台可以看到如下效果,数据库已经创建完成了,此时什么数据都没有
第三步:存入一个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)
刷新页面后可以看到如下结果,此时我这里已经存进去了,(我刷新了两次所以有两条数据)
第四步:封装删除,查询,修改方法并分别执行查看结果
// 根据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)
执行上面的代码后结果后,我这边的结果如下,
二、封装indexDB库,
在实际开发过程中我们并不会直接使用原生的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()
更多相关的indexdbwrapper 相关的教程请看 https://www.npmjs.com/package/indexdbwrapper
未完待续。。。。
indexDB入门到精通,indexdb增删查改,封装indexdb类库,indexdb基本使用相关推荐
- mybatis 介绍 入门 mapper配置文件 增删查改 别名配置 #和 $的区别
mybatis 介绍 今天,一起来说说mybits这个框架吧.这是一个持久层的框架.之前叫做ibatis. 所以,在它的代码中出现ibatis这个词的时候,不要感到惊讶.不是写错了,它确实就是这个样子 ...
- Mybatis、SpringBoot入门实战(微型项目) -- Mysql增删查改、写接口、测试接口
Mybatis入门实战(微型项目) – Mysql增删查改.写接口.测试接口 开发环境: 1.Window10 v1909 2.idea 2019 3.jdk 1.8 4.mybatis 3.5.5 ...
- MongoDB入门学习(三):MongoDB的增删查改
对于我们这样的菜鸟来说,最重要的不是数据库的管理,也不是数据库的性能,更不是数据库的扩展,而是怎么用好这款数据库,也就是一个数据库提供的最核心的功能,增删查改. 由于MongoDB存储数据都是以文档的 ...
- 捋一捋Python的文件属性和增删查改等(下)
正式的Python专栏第35篇,同学站住,别错过这个从0开始的文章! 前面写了文件的读取,按行读写等,这篇我们把文件处理等其他函数也过一过吧. 文件属性 前面我们更多集中学习了文件的读写(open)函 ...
- MyBatis-Plus——增删查改
开发环境 IDEA JDK:1.8 Spring Boot:2.6.2 Maven:3.3.9 MySQL:8.0.23 数据库准备 CREATE DATABASE mybatis_plus_db;D ...
- backbonejs mvc框架的增删查改实例
一:开发环境 coffeescript和nodejs需要先安装,没装网上自己查安装步骤. 代码编写环境及esp框架下载: esp框架下载地址:https://github.com/nonocast/e ...
- 【TcaplusDB知识库】GO快速上手PB表的增删查改操作
PROTOBUF说明 PROTO表是基于PROTOBUF协议设计的TcaplusDB表,PROTOBUF协议是Google开源的通用RPC通信协议,用于TcaplusDB存储数据的序列化.反序列化等操 ...
- 8天学通MongoDB——第二天 细说增删查改
2019独角兽企业重金招聘Python工程师标准>>> 看过上一篇,相信大家都会知道如何开启mongodb了,这篇就细说下其中的增删查改,首先当我们用上一篇同样的方式打开mongod ...
- MERGE批量增删查改数据
MERGE优点: 在批量处理数据的时候,我可以用到merge一次完成数据处理. 示例代码一: MERGE INTO student AS t using (SELECT '丽水' AS NAME,20 ...
- Django:数据库表的建立与增删查改(ForeignKey和ManytoMany)
数据库表的创建: 1.Django工程项目建立,基础环境调试. 2.创建表 from django.db import models class Publisher(models.Model): ...
最新文章
- Using AVStream.codec.time_base as a timebase hint to the muxer is deprecated
- 牛顿法 Newton Method
- 9本java程序员必读的书(附下载地址)
- 【Linux】一步一步学Linux——pmap命令(145)
- HP Instant Information
- 开源运维管理软件排名_云上自动化部署和运维的正确姿势
- mysql+同步大师,mysql同步异常 - 低调的糊涂虫的个人页面 - OSCHINA - 中文开源技术交流社区...
- 计算机启动需输入两次密码,我的电脑开机的时候要输入2次密码,我应当怎么去除?...
- 联想g510拆键盘的简单方法_联想G510重点笔记本拆机教程.doc
- 「建模学习」3DsMAX贴图制作方法,足球贴图案例详细教程
- 【WEB】web www http html hypermedia hypertext 技术名词的意思
- 2021年施工员-装饰方向-岗位技能(施工员)考试报名及施工员-装饰方向-岗位技能(施工员)找解析
- 音频处理-1 基础知识
- 标准差越大越集中_中国大学MOOC: 正态分布的标准差越大,其概率密度曲线越高越集中。...
- 递归解九连环并且打印中间过程
- python append()方法
- sentencepiece原理与实践
- 计算机网络课设路由器,计算机网络课程设计---小型校园网络设计.doc
- 拿着 GitHub 标星 80k 的阿里性能优化笔记,把项目优化个遍
- Python做数据分析有哪些优势?
热门文章
- 大专毕业考计算机公务员吗,『2020年国考』专科学历可以考公务员吗?
- c#将byte转为int_c#怎么把byte转化成int
- Linux系统之部署Yearning SQL审核平台
- 设计模式六大原则5---》迪米特法则
- 关于使用Word过程中如何快速键盘打出一个框框、一个打勾的框框、一个打叉的框框
- 【sublime】 中文文件名变成框框问题
- 科普 | 如何选择靠谱医师?声誉系统来助力(下)
- Elliptic Labs与小米联手,向印度市场推出红米 11SE智能手机
- linux vim 倒数200行,上古神器之vim
- 字节旗下火山引擎违规分发SkyWalking,更改所有包名、删除Apache基金会抬头