ts封装浏览器indexedDB

IndexedDB 的工具函数集合,主要包括以下功能:

  1. openStore: 打开指定名称的 IndexedDB 数据库,并创建或更新指定名称的对象存储空间。接受一个包含数据库名称、存储空间名称、键路径和可选索引数组的参数对象,并返回一个 Promise,该 Promise 在成功时解析为打开的 IDBDatabase 实例,或在失败时解析为 null。

  2. updateStore: 向指定的对象存储空间中添加或修改数据。接受一个已打开的 IDBDatabase 实例、存储空间名称和要添加或修改的数据对象作为参数,并返回一个 Promise,在成功时解析为 true,或在失败时解析为 false。

  3. deleteStore: 根据键值从指定的对象存储空间中删除数据。接受一个已打开的 IDBDatabase 实例、存储空间名称和要删除的键值作为参数,并返回一个 Promise,在成功时解析为 true,或在失败时解析为 false。

  4. find: 获取指定对象存储空间中的所有数据。接受一个已打开的 IDBDatabase 实例和存储空间名称作为参数,并返回一个 Promise,在成功时解析为包含所有数据的数组,或在失败时解析为空数组。

  5. findOne: 根据键值获取指定对象存储空间中的一条数据。接受一个已打开的 IDBDatabase 实例、存储空间名称和要获取的键值作为参数,并返回一个 Promise,在成功时解析为对应的数据对象,或在失败时解析为空数组。

  6. clearAll: 清空指定对象存储空间中的所有数据。接受一个已打开的 IDBDatabase 实例和存储空间名称作为参数,并返回一个 Promise,在成功时解析为 true,或在失败时解析为 false。

interface openStoreType {databaseName: string,storeName: string,keyPath: string,indexes?: Array<string>
}export const openStore = ({ databaseName, storeName, keyPath, indexes = [] }: openStoreType): Promise<IDBDatabase | null> => {return new Promise((resolve, reject) => {// 打开indexedDBlet request = window.indexedDB.open(databaseName, 1);request.onsuccess = (evt: Event) => {console.log('indexedDB open success!', evt);resolve((evt.target as IDBOpenDBRequest).result);}request.onerror = (evt: Event) => {console.log('indexedDb open fial!', evt);reject(null);}request.onupgradeneeded = (evt: IDBVersionChangeEvent) => {if ((evt?.target as IDBOpenDBRequest)?.result) {const { result } = evt.target as IDBOpenDBRequest;// 创建数据对象const store = result.createObjectStore(storeName, { autoIncrement: true, keyPath });// 创建索引for (let i in indexes) {store.createIndex(indexes[i], indexes[i], { unique: true });}// 创建数据对象成功store.transaction.oncomplete = (evt: any) => {console.log('object store create success!', evt);}console.log('indexedDb upgrade success!', evt);} else {console.log('indexedDb upgrade fail!', evt);}}});
}// 新增(add),修改(put)
export const updateStore = async (db: IDBDatabase, storeName: string, data: any): Promise<boolean> => {return new Promise((resolve, reject) => {// 获取store对象let store = db.transaction([storeName], 'readwrite').objectStore(storeName);// 添加或修改数据const request = store.put({ ...data, updateAt: new Date() });request.onsuccess = (evt: Event) => {console.log('update success!', evt);resolve(true);}request.onerror = (evt: Event) => {console.log('update fail!', evt);reject(false);}});
}// 根据key删除对应数据
export const deleteStore = async (db: IDBDatabase, storeName: string, key: string | number): Promise<boolean> => {return new Promise((resolve, reject) => {// 获取store对象let store = db.transaction([storeName], 'readwrite').objectStore(storeName);// 根据key删除数据const request = store.delete(key);request.onsuccess = (evt: Event) => {console.log('delete success!', evt);resolve(true);}request.onerror = (evt: Event) => {console.log('delete fail!', evt);reject(false);}});
}// 获取所有数据
export const find = (db: IDBDatabase, storeName: string): Promise<any[]> => {return new Promise((resolve, reject) => {// 获取store对象let store = db.transaction([storeName], 'readwrite').objectStore(storeName);const request = store.getAll();request.onsuccess = (evt: Event) => {console.log('get all data success!', evt);resolve((evt.target as any).result);}request.onerror = (evt: Event) => {console.log('get all data fail!', evt);reject([]);}});
}// 获取一条数据
export const findOne = (db: IDBDatabase, storeName: string, key: number | string): Promise<any> => {return new Promise((resolve, reject) => {let store = db.transaction([storeName], 'readwrite').objectStore(storeName);const request = store.get(key);request.onsuccess = (evt: Event) => {console.log('get data success!', evt);resolve((evt.target as any).result);}request.onerror = (evt: Event) => {console.log('get data fail!', evt);reject([]);}});
}// 清空所有数据
export const clearAll = (db: IDBDatabase, storeName: string): Promise<boolean> => {return new Promise((resolve, reject) => {let store = db.transaction([storeName], 'readwrite').objectStore(storeName);const request = store.clear();request.onsuccess = (evt: Event) => {console.log('clear data success!', evt);resolve(true);}request.onerror = (evt: Event) => {console.log('clear data fail!', evt);reject(false);}});
}

方法调用 

// 创建
let indexedDB= await openStore({databaseName: "test",storeName: "room",keyPath: "id",indexes: ["width", "height", "length"],
});// 添加
await updateStore(indexed, "room", { width: 50, height: 20, length: 60 });// 修改
await updateStore(indexed, "room", {id: 1,width: Math.floor(Math.random() * 100),height: Math.floor(Math.random() * 100),length: Math.floor(Math.random() * 100),
});// 删除
await deleteStore(indexed, "room", 1);// 获取所有数据
let res = await find(indexed, "room");// 根据key查询数据
let res = await findOne(indexed, "room", 2);

 

 

 

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

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

相关文章

论文辅助笔记:TEMPO 之 utils.py

0 导入库 from typing import Tuple import random import numpy as np import torch from statsmodels.tsa.seasonal import STL 1 EarlyStopping 提供了一个早停机制&#xff0c;用于在模型训练过程中监控验证集上的损失如果损失停止改进&#xff0c;则停止训练 1.1 __in…

【C语言】指针篇- 深度解析Sizeof和Strlen:热门面试题探究(5/5)

&#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专栏&#xff1a; C笔记 &#x1f308;喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章目录 一、简单介绍Sizeof和Strlen1.1 Sizeof1.2 Strlen函数1.3 Sie…

快速建站介绍

随着在线业务和电子商务的规模不断扩大&#xff0c;初创公司、个人网站和小型企业都需要快速地搭建自己的网站&#xff0c;以便更好地展示自己、推广产品和服务&#xff0c;并实现在线交易。快速建站已成为在线业务发展的一种主流方式&#xff0c;因为它能够快速地创建一个响应…

uniapp 自定义 App启动图

由于uniapp默认的启动界面太过普通 所以需要自定义个启动图 普通的图片不可以过不了苹果的审核 所以使用storyboard启动图 生成 storyboard 的网站&#xff1a;初雪云-提供一站式App上传发布解决方案

Java学习第02天-类型转换、运算符

目录 类型转换 自动类型转换 表达式的自动类型转换 强制类型转换 运算符 基本运算符 案例解答 连接字符串 自增自减运算符 面试习题 赋值运算符 比较运算符 逻辑运算符 基本逻辑运算符 短路逻辑运算符 三元运算符 基础知识 拓展案例 运算符优先级 读取用户…

UNeXt: a Low-Dose CT denoising UNet model with the modified ConvNeXt block

UNeXt&#xff1a;采用改进的ConvNeXt块的低剂量CT去噪UNet模型 论文链接&#xff1a;https://ieeexplore.ieee.org/document/10095645 项目链接&#xff1a;没找到 Abstract 近几十年来&#xff0c;临床医生广泛使用计算机断层扫描(CT)进行医学诊断。医疗辐射有潜在危险&am…

数据结构与算法-构建二叉树

构建二叉树 已知前序遍历与中序遍历或已知后序遍历和中序遍历可以构建唯一的二叉树 根据前序遍历与中序遍历建树 class Tree_Node():def __init__(self,val):self.val valself.left Noneself.right None # 构建二叉树 # 根据前序遍历与中序遍历构建二叉树 # 前序遍历[3,9…

77、贪心-买卖股票的最佳时机

思路 具体会导致全局最优&#xff0c;这里就可以使用贪心算法。方式如下&#xff1a; 遍历每一位元素找出当前元素最佳卖出是收益是多少。然后依次获取最大值&#xff0c;就是全局最大值。 这里可以做一个辅助数组&#xff1a;右侧最大数组&#xff0c;求右侧最大数组就要从…

ADS1.2中的代码debug的时候不出来代码的解决办法

我总觉得ADS1.2这个软件挺奇怪的&#xff0c;一阵一阵的&#xff0c;我遇到了很多奇怪的问题&#xff0c;这里记录一下吧。 1、新建文件的时候&#xff0c;没法选择这个add to project 解决办法&#xff1a;如果没有已存在的.mcp文件&#xff0c;就先新建project&#xff0c;然…

项目运行到手机端

运行到真机 手机和点到连在同一个wifi网络下面点击hbuiler上面的预览得到一个&#xff0c;network的网址这个时候去在手机访问&#xff0c;那么就可以访问网页了 跨域处理 这个时候可能会访问存在跨域问题 将uniapp的H5版本运行到真机进行调试&#xff0c;主要涉及到跨域问题…

java-Spring-mvc-(请求和响应)

目录 &#x1f4cc;HTTP协议 超文本传输协议 请求 Request 响应 Response &#x1f3a8;请求方法 GET请求 POST请求 &#x1f4cc;HTTP协议 超文本传输协议 HTTP协议是浏览器与服务器通讯的应用层协议&#xff0c;规定了浏览器与服务器之间的交互规则以及交互数据的格式…

【机器学习】HQ-Edit引领图像编辑新潮流

科技新纪元&#xff1a;HQ-Edit引领图像编辑新潮流 一、HQ-Edit的诞生&#xff1a;一场技术的革命二、技术实现与优势&#xff1a;强大的编辑能力和精准的匹配三、应用前景与实例展示&#xff1a;InstructPix2Pix的突破 在数字化时代&#xff0c;图像编辑技术正以前所未有的速度…

M3D-NCA: Robust 3D Segmentation with Built-In Quality Control论文速读

文章目录 M3D-NCA: Robust 3D Segmentation with Built-In Quality Control摘要方法实验结果 M3D-NCA: Robust 3D Segmentation with Built-In Quality Control 摘要 这是关于医学图像分割的一篇论文的结构化总结&#xff1a; 背景和挑战&#xff1a; 医学图像分割依赖于大型…

Kubernetes自动伸缩的主要类型有哪些?

Kubernetes中的自动伸缩功能主要有三种类型&#xff0c;分别针对不同的资源管理和应用场景。具体如下&#xff1a; Pod水平自动伸缩&#xff08;HPA&#xff09;&#xff1a;这是最常用的自动伸缩类型&#xff0c;它通过监控Pod的CPU利用率、内存利用率或自定义指标来增加或减…

【热闻速递】Google 裁撤 Python研发团队

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 【&#x1f525;热闻速递】Google 裁撤 Python研发团队引入研究结论 【&#x1f5…

Spring中AOP原理

Spring中AOP原理 在Spring框架中&#xff0c;AOP&#xff08;Aspect-Oriented Programming&#xff0c;面向切面编程&#xff09;是一种重要的编程范式&#xff0c;它可以帮助我们实现对代码的横切关注点进行统一管理和处理。在Spring中&#xff0c;AOP的实现主要依赖 于两个核…

2405C++,部分解析数格

原文 如果一个很大的数格串,然后用户只想解析其中的一个字段,一般需要遍历所有串全部解析所有字段,这样效率就很低了. 如果可部分解析数格字段,就可避免全部解析了,从而获得更好的性能. iguana已增加了支持部分解析数格的特征,比如这样一个数格对象: struct some_test_t {i…

xyctf ez_rand

[核心的代码就是这一部分&#xff0c;只要得到v4的值&#xff0c;也就是随机种子&#xff0c;那就可以把值弄出来了。所以我们需要做的就是爆破随机种子。 然后有一点是需要注意的&#xff0c;IDA这里显示的数据有可能是小端序的&#xff0c;所以我们需要export data&#xff…

DSP实时分析平台设计方案:924-6U CPCI振动数据DSP实时分析平台

6U CPCI振动数据DSP实时分析平台 一、产品概述 基于CPCI结构完成40路AD输入&#xff0c;30路DA输出的信号处理平台&#xff0c;处理平台采用双DSPFPGA的结构&#xff0c;DSP采用TI公司新一代DSP TMS320C6678&#xff0c;FPGA采用Xilinx V5 5VLX110T-1FF1136芯片&#xff…

向量的旋转矩阵

我们都知道&#xff0c;矩阵的乘法可以表示旋转。那么&#xff0c;这一理论的数学机理是什么呢&#xff1f;以及&#xff0c;这个旋转角度该怎么用矩阵表示呢&#xff1f; 本文用二维向量旋转来推导旋转矩阵的公式。假设&#xff0c;我们有一个向量P(x, y)&#xff0c;准备通过…