IndexedDB 简单封装
IndexedDB 浏览器数据库,是一个非关系型数据库,数据形式使用的是json,IndexedDB适合存储大量数据,它的API是异步调用的,当然他的api 也相对复杂。
当然浏览器数据存储 还有LocalStorage,Cookies,web SQL等 为什么还再来一个indexedDB。
之前我在开发过程中使用的是web sql,可以直接写sql查询数据。
LocalStorage,用key-value键值模式存储数据,而且Localstorage就是专门为小数量数据设计的。
Cookies只能是字符串 而且空间有限。
如果你在实际应用中希望存储大量数据时,IndexedDB会明显的更适合,IndexedDB也能提供你更为复杂的查询数据的方式,还能建立索引,他的索引还是挺666的。
下面是自己看了阮一峰的 文章 http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
简单的学习了下 IndexedDB 对这个浏览器数据库有个大概的了解,下面是个人对IndexedDB 简单的封装。
const dbName = "test"; const dbVersion = 1;export default {// indexedDB兼容 indexedDB:window.indexedDB ||window.webkitindexedDB ||window.msIndexedDB ||window.mozIndexedDB,//name:表名 key:主键 ,cursorIndex 索引 store: {teacher: {name: "teacher",key: "id",cursorIndex: [{ name: "teachNum", unique: false }]},student: {name: "student",key: "id",cursorIndex: [{ name: "stuNum", unique: false }]}},async initDB() {let that = this;let request = this.indexedDB.open(dbName, dbVersion);request.onerror = function() {console.log("打开数据库失败");};request.onsuccess = function() {console.log("打开数据库成功");};request.onupgradeneeded = function(event) {let db = event.target.result;for (var t in that.store) {if (!db.objectStoreNames.contains(that.store[t].name)) {var objectStore = db.createObjectStore(that.store[t].name, {keyPath: that.store[t].key,autoIncrement: true});for (let i = 0; i < that.store[t].cursorIndex.length; i++) {const element = that.store[t].cursorIndex[i];objectStore.createIndex(element.name, element.name, {unique: element.unique});}}}};},// 打开数据库openDB: function() {return new Promise((resolve, reject) => {let request = this.indexedDB.open(dbName, dbVersion);request.onerror = function(event) {reject("IndexedDB数据库打开错误," + event);};request.onsuccess = function(event) {resolve(event.target.result);};});},// 删除表deleteDB: function(table) {let deleteQuest = this.indexedDB.deleteDatabase(table);deleteQuest.onerror = function() {return Promise.resolve(false);};deleteQuest.onsuccess = function() {return Promise.resolve(true);};},// 关闭数据库closeDB: async function(db) {try {let d;if (!db) {d = await this.openDB();}let closeQuest = d.closeDB();return new Promise(resolve => {closeQuest.onerror = function() {resolve(false);};closeQuest.onsuccess = function() {resolve(true);};});} catch (error) {return Promise.resolve(false);}},// 添加数据,add添加新值insert: async function(table, data) {try {let db = await this.openDB();let request = db.transaction(table.name, "readwrite").objectStore(table.name).add(data);return new Promise((resolve, reject) => {request.onerror = function() {reject("添加数据出错");};request.onsuccess = function() {resolve(true);};});} catch (error) {console.log(error);return Promise.resolve(false);}},// 更新update: async function(table, data) {try {let db = await this.openDB();let request = db.transaction(table.name, "readwrite").objectStore(table.name).put(data);return new Promise(resolve => {request.onerror = function() {resolve(false);};request.onsuccess = function() {resolve(true);};});} catch (error) {return Promise.resolve(false);}},// 删除数据delete: async function(table, keyValue) {try {let db = await this.openDB();let request = db.transaction(table.name, "readwrite").objectStore(table.name).delete(keyValue);return new Promise(resolve => {request.onerror = function() {resolve(false);};request.onsuccess = function() {resolve(true);};});} catch (error) {return Promise.resolve(false);}},// 清空数据clear: async function(table) {let db = await this.openDB();let store = db.transaction(table.name, "readwrite").objectStore(table.name);store.clear();},// 查询数据 表名 索引值 索引 key 没有value key为key 而不是索引get: async function(table, keyValue, indexCursor) {try {let db = await this.openDB();let store = db.transaction(table.name, "readonly").objectStore(table.name);let request;request = !keyValue? store.openCursor(): indexCursor? store.index(indexCursor).get(keyValue): store.get(keyValue);let data = [];return new Promise(resolve => {request.onerror = function() {resolve("查询数据失败");};request.onsuccess = function(event) {if (!keyValue && !indexCursor) {if (event.target.result) {data.push(event.target.result.value);event.target.result.continue();} else {resolve(data);}} else {resolve([event.target.result]);}};});} catch (error) {return Promise.reject(error);}},// 通过游标操作数据, callback中要有游标移动方式handleDataByCursor: async function(table, keyRange) {try {let kRange = keyRange || "";let db = await this.openDB();let store = db.transaction(table, "readwrite").objectStore(table),request;request = store.openCursor(kRange);return new Promise(resolve => {request.onerror = function() {resolve("通过游标获取数据报错");};request.onsuccess = function(event) {let cursor = event.target.result;resolve(cursor);};});} catch (error) {return Promise.reject(error);}},// 通过索引游标操作数据, callback中要有游标移动方式handleDataByIndex: async function(table, keyRange, sursorIndex) {try {let kRange = keyRange || "";let db = await this.openDB();let store = db.transaction(table, "readwrite").objectStore(table),request;request = store.index(sursorIndex).openCursor(kRange);return new Promise(resolve => {request.onerror = function() {resolve("通过索引游标获取数据报错");};request.onsuccess = function(event) {let cursor = event.target.result;if (cursor) {resolve(cursor);}};});} catch (error) {return Promise.reject(error);}},// 创建游标索引createCursorIndex: async function(table, cursorIndex, unique) {var db = await this.openDB();let store = db.transaction(table, "readwrite").objectStore(table);store.createIndex(cursorIndex, cursorIndex, {unique: unique});return Promise.resolve();} };
此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
IndexedDB 简单封装相关推荐
- Android APP更新下载工具类——简单封装DownloadManager
几乎所有APP都包含了检查更新功能,更新下载功能的实现方式常用的有两种:1.使用App网络框架的文件下载请求:2.使用自带的DownloadManager类:本文介绍第二种,简单封装一下Downloa ...
- 简单封装浏览器 cookie 工具类
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8265571 ...
- 小程序简单封装 request 请求
我在这里做了详细的介绍 : 小程序简单封装 request 请求 转载于:https://www.cnblogs.com/biangz/p/9984340.html
- 简单封装 HTTP 请求
2017-2-19 更新到第二版: 源码地址:http://git.oschina.net/sp42/ajaxjs/tree/master/ajaxjs-base/src/com/ajaxjs/net ...
- 【JDBC】实现对JDBC 连接的简单封装
package util;import java.sql.Connection; import java.sql.DriverManager;/**** 实现对JDBC 的封装* @author mq ...
- Android AsyncTask 深度理解、简单封装、任务队列分析、自定义线程池
前言:由于最近在做SDK的功能,需要设计线程池.看了很多资料不知道从何开始着手,突然发现了AsyncTask有对线程池的封装,so,就拿它开刀,本文将从AsyncTask的基本用法,到简单的封装,再到 ...
- ios开发之使用多文件上传的简单封装最原始的
ios开发之使用多文件上传的简单封装最原始的 // // ViewController.m // 18-上传多个文件 // // Created by 鲁军 on 2021/2/13. //#impo ...
- Spring jdbc 对象Mapper的简单封装
一般查询实体的时候,都需要这么使用/** * 根据id查询 * * @return */ public Emp queryEmpById(Intege ...
- Google图片加载库Glide的简单封装GlideUtils
Google图片加载库Glide的简单封装GlideUtils
最新文章
- 原 ng-include用法分析以及多标签页面的简单实现方式
- (0053)iOS开发之沙盒(sandbox)机制和文件操作(三)
- Spring Cloud Alibaba基础教程:Sentinel使用Apollo存储规则
- 普通用户的sudo权限,禁止root用户登录
- c 语言 二维数组地址,C/C++ 关于一维或二维数组首地址表示含义
- 为什么要用maven - 1
- 【Pygame】屏幕图形绘制
- iostat lsof
- java http 工具类_Java发送Http请求工具类
- 打印机不弹出打印窗口_打印CAD图纸总是留白?做好这个操作,能打印出你想要的CAD图纸...
- oracle执行计划explain,Oracle 常见的执行计划步骤(explain结果的Description数据参考)...
- 小米wifi显示无网络连接到服务器,小米路由器wifi连接上不能上网怎么办?
- Kuma初步学习笔记-universal 模式
- Android运营商名称显示之PLMN的读取(原)
- 30天数据分析与机器学习实践之Day16——Python文本数据分析:新闻分类任务
- Navicat连接mysql时出现 Access denied for user ‘root‘@‘xxx.xxx.xxx.xxx‘ (using password: YES) 的原因及解决办法。
- 烽火移动设备管理:企业安全管理无处遁形
- html使表格位于页面的右下方,在 HTML 页面中,要显示如下图所示的表格,应在下方 HTML 代码的下划线处填写()。 table border=”1” trtd =”2” 性别 /...
- 论文笔记之Non-Local
- [原创]轻轻的,我走了,离开了这里,踏上了新的旅途
热门文章
- linux nand 坏块_NAND Flash的坏块管理设计
- vs调试 右键 没有监视变量_IAR EWARM的SWO Trace调试功能
- r矢量球坐标系旋度_三个常用坐标系的认识及矢量旋度表达式的证明
- linux eth0 目录,教程 | Linux常用命令大全
- c语言可以调用汇编语言吗,C语言与汇编语言混编方式
- lampp mysql 等待响应时间很长_Apache 打开网页的时候等待时间过长的解决方案
- 智能计算机的功能是什么问题,人工智能在电脑系统的作用
- android打开sqlite数据库,Android:打开和关闭SQLite数据库
- php代码1030报错,laravel框架MVC理解_1030
- 两位小数乘两位小数竖式_人教版小学数学五年级上册小数乘整数公开课优质课课件教案视频...