简单实用浏览器indexDB

2024-05-10 18:32
文章标签 简单 浏览器 实用 indexdb

本文主要是介绍简单实用浏览器indexDB，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

之前在做项目的过程中，偶有用到indexDB来做缓存，后面就基本上使用的localstrage，恩，其实indexDB也是挺好使用的，可以去看看张鑫旭的这几篇文章

https://www.zhangxinxu.com/wordpress/2018/06/js-localforage-localstorage-indexdb/

https://www.zhangxinxu.com/wordpress/2017/07/html5-indexeddb-js-example/

写得也都很全面，下面附上自写的部分代码

class UtilDB {constructor(store, ...options) {this.store = store;this.options = options;}/*** 打开创建数据库 返回promise* @param {DB名字} name* @param {版本号} version*/openDB(name, version = 1, keypath) {let indexDB =window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;let request = indexDB.open(name, version);const pormise = new Promise((resolve, reject) => {request.onerror = e => {console.log("连接indexDB数据库失败");console.error(e.currentTarget.error.message);reject(e.currentTarget.error.message);};request.onsuccess = e => {console.log("连接indexDB数据库成功");this.db = e.target.result;resolve(this.db);};request.onupgradeneeded = e => {let db = e.target.result;if (!db.objectStoreNames.contains(this.store)) {let store = db.createObjectStore(this.store, {keypath: keypath,autoIncrement: true});this.options.forEach(item => {if (Object.prototype.toString.call({}) == "[object Object]") {store.createIndex(item.name + "", item.name + "", item.options);} else {store.createIndex(item + "", item + "", {unique: false});}});}};});return pormise;}/*** 创建事务* @param {事务} way*/__commonCrud(way) {let normal = this.store + "";let tx = this.db.transaction(normal, way);let store = tx.objectStore(normal);return store;}/*** 添加数据* @param {一般为string类型} val 要添加的值* @param {Function} callback 回调函数*/addData(val, callback = () => {}) {let req = this.__commonCrud("readwrite");req = req.add(val);req.onsuccess = e => {console.info("addData", "添加数据成功");return callback(e.target);};req.onerror = e => {console.error("add Error", "添加数据失败");return callback(e.target);};}/*** 修改操作* @param {*} val 要修改的值* @param {*} callback 修改的回调*/putData(val, callback = () => {}) {let req = this.__commonCrud("readwrite");req = req.put(val, val[Object.keys(val)[0]]);req.onsuccess = e => {console.log("修改数据成功");return callback(e.target);};req.onerror = e => {console.log("修改数据失败");return callback(e.target);};}/*** 获取数据* @param {key} val key值，一般为string* @param {*} callback 获取数据的回调函数*/getData(val, callback = () => {}) {let req = this.__commonCrud("readonly");req = req.get(val);req.onsuccess = e => {if ("success" === e.type) {console.log("获取数据成功");return callback(e.target.result);}};req.onerror = e => {console.log("获取数据失败");return callback(e);};}/*** 获取所有数据* @param {*} callback*/getAllData(callback = () => {}) {let req = this.__commonCrud("readwrite");let result = [];req = req.openCursor();req.onerror = e => {console.error("query error", e.error);return callback(e.target);};req.onsuccess = e => {let cursor = e.target.result;if (cursor) {result.push(cursor.value);cursor.continue();} else {return callback(result);}};}/*** 获取单条数据* @param {*} name* @param {*} callback*/getSignleData(name, callback = () => {}) {console.log("获取单条信息");let req = this.__commonCrud("readonly");let index = req.index(this.options[0].name);req = index.get(name);req.onsuccess = e => {console.log("获取单条数据成功");return callback(e.target.result);};req.onerror = e => {console.log("获取单条数据成功");return callback(e.target.result);};}/*** 删除数据* @param {*} val* @param {*} callback*/deleteData(val, callback = () => {}) {let req = this.__commonCrud("readwrite");req = req.delete(val);req.onerror = e => {console.log("系统错误");return callback(e.target);};req.onsuccess = e => {console.log("执行成功");return callback(e.target);};}/*** 删除单条数据* @param {*} userName* @param {*} callback*/deleteSignleData(userName, callback = () => {}) {let req = this.__commonCrud("readwrite");req = req.openCursor();req.onerror = e => {console.error("query:error", "查询使用游标时出错");return callback(e.error.name);};req.onsuccess = e => {let cursor = e.target.result;if (cursor) {if (cursor.userName == userName) {cursor.delete();}cursor.continue();} else {return callback(cursor);}};}onError(callback) {return callback(event);}onSuccess(callback) {return callback(event);}onComplete(callback) {return callback(event);}/*** 关闭数据库* @param {数据库} db*/closeDB(db) {db.close();}/*** 删除数据库* @param {数据库名称} name*/deleteDB(name) {indexedDB.deleteDatabase(name);}
}
export default UtilDB;

其他更多文章，请移步www.yuduo.top

这篇关于简单实用浏览器indexDB的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/977220。

相关文章

使用Python开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
Mysql表的简单操作(基本技能)

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例：修改表在数据库中，表的操作主要
阅读更多...
macOS无效Launchpad图标轻松删除的4 种实用方法

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中，并且长按图标也不会出现删除符号，下面解决这个问... 在 MACOS 上，Launchpad（也就是「启动台」）是一个便捷的 App 启动工具。但有时候，应
阅读更多...
springboot简单集成Security配置的教程

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》：本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig（自定义资源权限规则
阅读更多...
如何使用Python实现一个简单的window任务管理器

如何使用Python实现一个简单的window任务管理器

《如何使用Python实现一个简单的window任务管理器》这篇文章主要为大家详细介绍了如何使用Python实现一个简单的window任务管理器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 任务管理器效果图完整代码import tkinter as tkfrom tkinter i
阅读更多...
使用DrissionPage控制360浏览器的完美解决方案

使用DrissionPage控制360浏览器的完美解决方案

《使用DrissionPage控制360浏览器的完美解决方案》在网页自动化领域,经常遇到需要保持登录状态、保留Cookie等场景,今天要分享的方案可以完美解决这个问题：使用DrissionPage直接... 目录完整代码引言为什么要使用已有用户数据？核心代码实现1. 导入必要模块2. 关键配置（重点！）3.
阅读更多...
C++中函数模板与类模板的简单使用及区别介绍

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中，模板是实现泛型编程
阅读更多...
使用EasyExcel实现简单的Excel表格解析操作

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》：本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis
阅读更多...
Java中数组转换为列表的两种实现方式(超简单)

Java中数组转换为列表的两种实现方式(超简单)

《Java中数组转换为列表的两种实现方式(超简单)》本文介绍了在Java中将数组转换为列表的两种常见方法使用Arrays.asList和Java8的StreamAPI,Arrays.asList方法简... 目录1. 使用Java Collections框架（Arrays.asList）1.1 示例代码1.
阅读更多...
Java8需要知道的4个函数式接口简单教程

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》：本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口？Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2