JavaScript笔记之indexedDB的轻量化使用(增删改查)

已于 2023-09-05 14:26:26 修改
阅读量1.8k 收藏 3
点赞数 3
分类专栏： JavaScript 文章标签： javascript 非关系型数据库 indexedDB
于 2022-05-04 22:17:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Spider_wang/article/details/124578977
版权

前些日子尝试使用 HTML5 的 indexedDB，发现标准提出来的非关系型数据库真的很难用，根据自己理解基于 indexedDB 封装了一个轻量级的数据库管理类，能够快速的建表、存数据。

1.需求分析

介于 indexedDB 不人性化的事务操作，以及神奇的建表逻辑（只能通过升级数据库，在升级事件内建表！），考虑自己实际需求做了以下的取舍：

  1. 因为轻量级原因，我只需要建多张表而不需要建数据库，因此全局只要维护一个数据库实例即可；
  2. 因其离谱的建表逻辑（也有可能我没把握住），通过多次尝试，最终选择在需要建表的时候主动升级数据库；
  3. indexedDB 按索引查询方法过于繁琐（需要根据数据设置索引），因此通过 cursor 遍历、人为找到要查询的数据，这样的好处是对 SDK 调用友好。

2.数据库管理对象接口封装

创建原型对象，并初始化相关变量：

// 可以参见之前的博客
import promise from 'promise.js'

/*
* 数据半持久化存储
* 注: 利用 IndexDB 做数据缓存
*/
let MircoDB = function () {
  // 初始化数据库名
  this._db_name = '_MICRO_DB'

  // 定义数据库
  this._micro_db = undefined

  // 数据库版本
  this.version = 0

  // 获取 indexedDB 管理对象
  this._indexedDB = undefined
}

初始化数据库，并打开：

/*
* 数据库初始化接口
* 返回 Promise 对象
*/
MircoDB.prototype.init = function () {
  let deffer = _promise.deffer()

  // 调用初始化函数
  this._init(deffer)

  return deffer.promise
}

/*
* [内部函数
* 初始化
*/
MircoDB.prototype._init = function (deffer) {
  let request

  // 初始化
  this._indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB

  // 打开数据库
  request = this._indexedDB.open(this._db_name)

  // 错误监听
  request.onerror = (event) => {
    // 抛出异常
    deffer.reject(new Error(error.DB_OPEN_ERROR))
  }

  // 正确打开监听
  request.onsuccess = (event) => {
    // 绑定数据库
    this._micro_db = event.target.result
    // 记录版本号
    this.version = this._micro_db.version
    // 返回结果
    deffer.resolve(true)
  }
}

建表，这里也有比较坑的地方，建表后需要重新赋值数据对象，不然数据库对象会丢失：

/*
* 创建表
* 注: 如果存在，那么打开表；反之，创建表
* 创建执行事件，如果数据库没打开，就执行。那么直接存储到对应的 TODO 数组内，在打开后执行相应的执行函数。
* 参数 tableName: 表名
* 参数 keys: 搜索索引值（数组），如['name', 'id']
*/
MircoDB.prototype.createTable = function (tableName) {
  let deffer = _promise.deffer()
  let request

  // 如果需要新建数据库，那么放到队列里
  if (!this._micro_db.objectStoreNames.contains(tableName)) {
    // 打开数据库
    this.version++
    this._micro_db.close()
    request = this._indexedDB.open(this._db_name, this.version)

    // 错误监听
   request.onerror = (event) => {
      deffer.reject(new Error(error.DB_OPEN_ERROR))
    }

    request.onupgradeneeded = function (event) {
      this._micro_db = event.target.result
      this._micro_db.createObjectStore(tableName, { keyPath: '_uuid' })
    }

    request.onsuccess = (event) => {
      this._micro_db = event.target.result
      this.version = this._micro_db.version
      deffer.resolve(true)
    }
  } else {
    deffer.resolve(true)
  }

  return deffer.promise
}

增加一条数据（数据对象类型不限）：

/*
* 增加数据
*/
MircoDB.prototype.add = function (tableName, object) {
  let deffer = this._gm._internal._promise.deffer()
  let uuid = utils.createUUID(8) // 创建唯一标识，可见仓库代码，也可以自行实现
  let request

  // 添加主键
  object._uuid = uuid

  // 发起请求
  request = this._micro_db.transaction([tableName], 'readwrite')
    .objectStore(tableName)
    .add(object)

  // 成功监听
  request.onsuccess = function (event) {
    // 返回唯一标识
    deffer.resolve(uuid)
  }

  // 错误监听
  request.onerror = function (event) {
    deffer.reject(new Error(error.TABLE_HANDLE_ERROR))
  }

  return deffer.promise
}

删除一条数据，根据 uuid 删除（目前通过增加语句和查询语句返回 uuid，降低复杂度）：

/*
* 删除数据
*/
MircoDB.prototype.delete = function (tableName, uuid) {
  let deffer = _promise.deffer()
  let request = this._micro_db.transaction([tableName], 'readwrite')
    .objectStore(tableName)
    .delete(uuid)

  // 成功监听
  request.onsuccess = function (event) {
    deffer.resolve(true)
  }

  // 错误监听
  request.onerror = function (event) {
    deffer.reject(new Error(error.TABLE_HANDLE_ERROR))
  }

  return deffer.promise
}

修改数据：

/*
* 修改数据
* 数据必须包含主键
*/
MircoDB.prototype.update = function (tableName, data) {
  let deffer = _promise.deffer()
  let request = this._micro_db.transaction([tableName], 'readwrite')
    .objectStore(tableName)
    .put(data)

  // 成功监听
  request.onsuccess = function (event) {
    deffer.resolve(true)
  }

  // 错误监听
  request.onerror = function (event) {
    deffer.reject(new Error(error.TABLE_HANDLE_ERROR))
  }

  return deffer.promise
}

查询数据，因为用 cursor（数据库查询指针）的原因，因此查询效率上可能不如索引快，优点是对用户友好：

/*
* 查询数据
*/
MircoDB.prototype.query = function (tableName, queryObj) {
  let deffer = _promise.deffer()
  let request = this._micro_db.transaction([tableName], 'readonly')
    .objectStore(tableName)
    .openCursor()
  let result = []

  // 错误监听
  request.onerror = function (event) {
    deffer.reject(new Error(error.TABLE_HANDLE_ERROR))
  }

  // 成功监听
  request.onsuccess = function (event) {
    let cursor = event.target.result

    if (cursor) {
      let tag = false

      // 循环找到匹配的数据
      for (let key in queryObj) {
        if (cursor.value[key] === queryObj[key]) {
          continue
        } else {
          tag = true
          break
        }
      }

      // 判断是否键值全部匹配
      if (!tag) {
        result.push(cursor.value)
      }

      cursor.continue()
    } else {
      deffer.resolve(result)
    }
  }

  return deffer.promise
}

读取所有数据：

/*
* 读取所有数据
*/
MircoDB.prototype.queryAll = function (tableName) {
  let deffer = _promise.deffer()
  let request = this._micro_db.transaction(tableName, 'readonly')
    .objectStore(tableName)
    .openCursor()
  let result = []

  // 成功监听
  request.onsuccess = function (event) {
    let cursor = event.target.result

    if (cursor) {
      result.push(cursor.value)
      cursor.continue()
    } else {
      deffer.resolve(result)
    }
  }

  // 错误监听
  request.onerror = function (event) {
    deffer.reject(new Error(error.TABLE_HANDLE_ERROR))
  }

  return deffer.promise
}

清空表数据：

/*
* 清空表数据
*/
MircoDB.prototype.clear = function (tableName) {
  let deffer = _promise.deffer()
  let request = this._micro_db.transaction([tableName], 'readwrite')
    .objectStore(tableName)
    .clear()

  // 错误监听
  request.onerror = function (event) {
    deffer.reject(new Error(error.TABLE_HANDLE_ERROR))
  }

  // 成功监听
  request.onsuccess = function (event) {
    deffer.resolve(true)
  }

  return deffer.promise
}

删除表：

/*
* 删除表
*/
MircoDB.prototype.removeTable = function (tableName) {
  let deffer = _promise.deffer()
  let request

  // 如果需要新建数据库，那么放到队列里
  if (this._micro_db.objectStoreNames.contains(tableName)) {
    // 打开数据库
    this.version++
    this._micro_db.close()
    request = this._indexedDB.open(this._db_name, this.version)

    // 错误监听
    request.onerror = (event) => {
      deffer.reject(new Error(error.TABLE_HANDLE_ERROR))
    }

    request.onupgradeneeded = function (event) {
      this._micro_db = event.target.result
      // 删除表名
      this._micro_db.deleteObjectStore(tableName)
      deffer.resolve(true)
    }

    request.onsuccess = (event) => {
      this._micro_db = event.target.result
      this.version = this._micro_db.version
    }
  }

  return deffer.promise
}

3.具体使用

// 创建实例
let _mircodb = new MicroDB()

// 初始化数据库
_microdb.init()
  .then(() => {
    // 创建表
    return _microdb.createTable('my_table') // true
  })
  .then(() => {
    // 插入数据
    return _microdb.add('my_table', {
      val1: 123,
      val2: '123',
      str: 'hello, world'
    })
  })
  .then((uuid) => {
    console.log(uuid) // fde34sd4 唯一标识
    // 插入数据
    return _microdb.update('my_table', {
      _uuid: 'fde34sd4',
      val1: 234,
      val2: '345',
      str: 'hello, world'
    })
  })
  .then(() => {
    // 查询结果
    return _microdb.query('my_table', { val1: 234 })
  })
  .then((result) => {
    console.log(result) // [{ _uuid: 'fde34sd4', val1: 234, val2: '345', str: 'hello, world' }]
  })
  .catch((err) => {
    console.log(err.message)
  })

以上是我在 indexedDB 疯狂踩坑后选用的折中解决方案，大家如果有更好的方案，可以讨论。

注：示例代码可参见 个人前端知识库。

created by @SpiderWang
转载请注明作者及链接

Spider.Wang
关注
专栏目录
JavaScript IndexedDB 完整指南
p1967914901的博客
09-30 1388
本文将通过一个小教程向你介绍 ，并将 与其他可用选项进行比较。 用于在浏览器中存储数据，对于需要离线工作的 web 应用程序（如大多数进步的 web 应用程序）尤其重要。首先，让我们介绍一下为什么需要将数据存储在 web 浏览器中。数据在 web 应用程序中无处不在——用户交互创建数据、查找数据、更新数据和删除数据。如果没有存储这些数据的方法，就不可能允许用户交互跨多个 web 应用程序的使用保持状态。你通常会使用 MySQL、Postgres、MongoDB、Neo4j、ArangoDB 等数据库来处理
【JavaScript】IndexedDB
好久不见的流星
02-18 1869
IndexedDB 是一种在浏览器中存储和检索大量结构化数据的强大工具。通过异步操作、事务、索引等特性，它提供了高性能的数据存储和检索方式。IndexedDB 适用于需要大容量、高性能存储的应用场景，如离线应用、大型数据管理等。希望通过本篇博客，你对IndexedDB的概念、基本用法以及适用场景有了更深入的了解。
IndexedDB深度解析：JavaScript的客户端数据库
最新发布
2401_85763803的博客
08-15 675
IndexedDB是一种客户端存储技术，允许Web应用程序在用户的浏览器中存储和检索数据，即使在没有网络连接的情况下也能工作。它特别适合存储大量数据，如图片、视频、文件等。
JavaScript的indexedDB
qq_43505774的博客
06-27 490
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var idb; function db(){ var req=indexedDB.open('indexed','2020627') //设置indexedDB的数据库名字与版本
js indexDB小白入门，增删查改，判断key是否存在
wnk1997的博客
03-24 421
写的很好，转载下，顺便再写了个新方法，判断key存不存在数据库内，这样添加的时候开业先判断key存不存在，然后进行添加或者更新的操作，不然默认都是添加的话，添加key相同页面会报错。原文：https://blog.csdn.net/qq_41579192/article/details/121605983。
js indexDB使用 --chatGPT
Fly_Sky
10-31 365
在 `onupgradeneeded` 事件中，我们定义了一个名为 'myObjectStore' 的对象存储，并设置 `category` 和 `name` 组合为主键。在 `onupgradeneeded` 事件中，我们定义了一个名为 'myObjectStore' 的对象存储，并创建了两个索引，以便后续查询数据。在这个示例中，我们将数据库名称 (`dbName`) 和对象存储名称 (`objStoreName`) 作为函数参数传递，并在函数内部使用它们。抱歉，我之前的回答中存在错误。
Indexeddb 创建、增删改查
然后他就拿棍子来打我
10-18 7135
虽然小伙伴平时项目用到的不多，但了解它并会使用还是很有必要。以下是本人总结 IndexedDB 的常规使用方式. 2. 打开数据库 3. 监听 IndexedDB 版本更新 新建数据库时，新增数据表。 更新数据库时，对数据表进行更新。 效果图如下 效果图如下 效果图如下 效果图如下 效果图如下
javascript基础学习系列七百零八：IndexedDB
m0_68635815的博客
04-04 296
使用IndexedDB 数据库的第一步是调用indexedDB.open()方法，并给它传入一个要打开的数据。不存在，open()操作会创建一个新数据库，然后触发upgradeneeded 事件。IndexedDB 的设计几乎完全是异步的。为此，大多数操作以请求的形式执行，这些请求会异步执行，开数据库期间发生错误，event.target.errorCode 中就会存储表示问题的错误码。如果给定名称的数据库已存在，则会发送一个打开它的请求；如果数据库存在，而你指定了一个升级版的版本号，则会立。
利用Electron实现数据持久化：使用IndexedDB和SQLite
Electron提供了一种使用Web技术开发桌面应用的简单方式，无需掌握复杂的编程语言或工具。 Electron的特点包括： - 具有丰富的API和插件生态系统，可以轻松访问底层操作系统功能。 - 支持多平台，可以在Windows、...
独家笔记应用
02-08
4. **数据持久化**：为了保存用户的笔记，开发者可能采用了IndexedDB或Web Storage（localStorage/sessionStorage）来实现本地数据存储。这样即使在离线状态下，用户也能访问到之前的笔记。 5. **API接口**：如果...
notemanager.github.io:在线笔记
04-30
同时，考虑到这是一个在线笔记应用，很可能采用了本地存储（如浏览器的localStorage）或者使用了Web API（如IndexedDB）来在用户浏览器中持久化数据，即使在离线状态下也能访问之前的笔记。 此外，应用可能还包含了...
simple-indexdb-js:使用JavaScript Promise的简单IndexDB的包装器
05-19
SimpleIndexedDB.js 使用ES6的简单IndexedDB的包装器（JavaScript Promise，let，箭头功能）。
html5关于indexdb简单demo
09-26
该资源包含了一个indexdb学习的简单demo，包含了增删改查，以及索引的创建和使用，可以参考博客http://blog.csdn.net/mockingbirds/article/details/48749375
myNotesApp:离子个人应用程序以创建添加删除的笔记
05-12
JavaScript是myNotesApp的核心编程语言，它是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发。JavaScript允许动态内容的创建，使用户在与网站交互时能够获得更丰富的体验。在myNotesApp中，JavaScript...
Ajax 学习笔记
FFFde博客
05-24 379
1、 在网页中请求服务器上的数据资源，需要用到XMLHttpRequest 对象，XMLHttpRequest（简称xhr）是浏览器提供的 js 成员。 用法： var xhrObj = new XMLHttpRequest() 2、资源请求方式 get请求：获取服务器端资源 post请求：向服务器提交数据 3、Ajax 3.1 在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式。Ajax 可以实现网页与服务器之间的数据交互 3.2 jQuery 中的 Ajax ： 浏览器中提供的
【JavaScript】前端存储（二） —— IndexedDB
努力搬砖
05-15 4416
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））
Js| IndexDb Test
GC怪兽的Blog
08-08 200
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
javascript基础学习系列九百零八：IndexedDB
m0_68635815的博客
04-18 279
使用IndexedDB 数据库的第一步是调用indexedDB.open()方法，并给它传入一个要打开的数据。不存在，open()操作会创建一个新数据库，然后触发upgradeneeded 事件。IndexedDB 的设计几乎完全是异步的。为此，大多数操作以请求的形式执行，这些请求会异步执行，开数据库期间发生错误，event.target.errorCode 中就会存储表示问题的错误码。如果给定名称的数据库已存在，则会发送一个打开它的请求；如果数据库存在，而你指定了一个升级版的版本号，则会立。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值