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 简单封装相关推荐

  1. Android APP更新下载工具类——简单封装DownloadManager

    几乎所有APP都包含了检查更新功能,更新下载功能的实现方式常用的有两种:1.使用App网络框架的文件下载请求:2.使用自带的DownloadManager类:本文介绍第二种,简单封装一下Downloa ...

  2. 简单封装浏览器 cookie 工具类

    版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8265571 ...

  3. 小程序简单封装 request 请求

    我在这里做了详细的介绍 : 小程序简单封装 request 请求 转载于:https://www.cnblogs.com/biangz/p/9984340.html

  4. 简单封装 HTTP 请求

    2017-2-19 更新到第二版: 源码地址:http://git.oschina.net/sp42/ajaxjs/tree/master/ajaxjs-base/src/com/ajaxjs/net ...

  5. 【JDBC】实现对JDBC 连接的简单封装

    package util;import java.sql.Connection; import java.sql.DriverManager;/**** 实现对JDBC 的封装* @author mq ...

  6. Android AsyncTask 深度理解、简单封装、任务队列分析、自定义线程池

    前言:由于最近在做SDK的功能,需要设计线程池.看了很多资料不知道从何开始着手,突然发现了AsyncTask有对线程池的封装,so,就拿它开刀,本文将从AsyncTask的基本用法,到简单的封装,再到 ...

  7. ios开发之使用多文件上传的简单封装最原始的

    ios开发之使用多文件上传的简单封装最原始的 // // ViewController.m // 18-上传多个文件 // // Created by 鲁军 on 2021/2/13. //#impo ...

  8. Spring jdbc 对象Mapper的简单封装

    一般查询实体的时候,都需要这么使用/**      * 根据id查询      *       * @return      */     public Emp queryEmpById(Intege ...

  9. Google图片加载库Glide的简单封装GlideUtils

    Google图片加载库Glide的简单封装GlideUtils  

最新文章

  1. 原 ng-include用法分析以及多标签页面的简单实现方式
  2. (0053)iOS开发之沙盒(sandbox)机制和文件操作(三)
  3. Spring Cloud Alibaba基础教程:Sentinel使用Apollo存储规则
  4. 普通用户的sudo权限,禁止root用户登录
  5. c 语言 二维数组地址,C/C++ 关于一维或二维数组首地址表示含义
  6. 为什么要用maven - 1
  7. 【Pygame】屏幕图形绘制
  8. iostat lsof
  9. java http 工具类_Java发送Http请求工具类
  10. 打印机不弹出打印窗口_打印CAD图纸总是留白?做好这个操作,能打印出你想要的CAD图纸...
  11. oracle执行计划explain,Oracle 常见的执行计划步骤(explain结果的Description数据参考)...
  12. 小米wifi显示无网络连接到服务器,小米路由器wifi连接上不能上网怎么办?
  13. Kuma初步学习笔记-universal 模式
  14. Android运营商名称显示之PLMN的读取(原)
  15. 30天数据分析与机器学习实践之Day16——Python文本数据分析:新闻分类任务
  16. Navicat连接mysql时出现 Access denied for user ‘root‘@‘xxx.xxx.xxx.xxx‘ (using password: YES) 的原因及解决办法。
  17. 烽火移动设备管理:企业安全管理无处遁形
  18. html使表格位于页面的右下方,在 HTML 页面中,要显示如下图所示的表格,应在下方 HTML 代码的下划线处填写()。 table border=”1” trtd =”2” 性别 /...
  19. 论文笔记之Non-Local
  20. [原创]轻轻的,我走了,离开了这里,踏上了新的旅途

热门文章

  1. linux nand 坏块_NAND Flash的坏块管理设计
  2. vs调试 右键 没有监视变量_IAR EWARM的SWO Trace调试功能
  3. r矢量球坐标系旋度_三个常用坐标系的认识及矢量旋度表达式的证明
  4. linux eth0 目录,教程 | Linux常用命令大全
  5. c语言可以调用汇编语言吗,C语言与汇编语言混编方式
  6. lampp mysql 等待响应时间很长_Apache 打开网页的时候等待时间过长的解决方案
  7. 智能计算机的功能是什么问题,人工智能在电脑系统的作用
  8. android打开sqlite数据库,Android:打开和关闭SQLite数据库
  9. php代码1030报错,laravel框架MVC理解_1030
  10. 两位小数乘两位小数竖式_人教版小学数学五年级上册小数乘整数公开课优质课课件教案视频...