indexeddb封装库选型研究

背景

原生的 indexeddb 写法很复杂麻烦,所以选择一个类似 localStorage 的写法的封装库很有必要。

indexeddb 阮一峰的教程:www.ruanyifeng.com/blog/2018/0...

原生的 indexeddb 写法:

js 复制代码
// 打开数据库
let request = indexedDB.open('MyTestDatabase', 1);

request.onupgradeneeded = function (event) {
  let db = event.target.result;

  // 创建对象存储
  let objectStore = db.createObjectStore('customers', { keyPath: 'id', autoIncrement: true });

  // 创建索引
  objectStore.createIndex('name', 'name', { unique: false });
  objectStore.createIndex('email', 'email', { unique: true });
};

request.onsuccess = function (event) {
  let db = event.target.result;

  // 添加数据
  let transaction = db.transaction(['customers'], 'readwrite');
  let objectStore = transaction.objectStore('customers');
  let customer = { name: 'John Doe', email: 'john.doe@example.com' };
  let addRequest = objectStore.add(customer);

  addRequest.onsuccess = function (event) {
    console.log('数据添加成功');

    // 读取数据
    let getRequest = objectStore.get(event.target.result);
    getRequest.onsuccess = function (event) {
      console.log('读取的数据: ', event.target.result);

      // 更新数据
      let updatedCustomer = event.target.result;
      updatedCustomer.name = 'Jane Doe';
      let updateRequest = objectStore.put(updatedCustomer);

      updateRequest.onsuccess = function (event) {
        console.log('数据更新成功');

        // 删除数据
        let deleteRequest = objectStore.delete(event.target.result.id);
        deleteRequest.onsuccess = function (event) {
          console.log('数据删除成功');
        };
      };
    };
  };
};

request.onerror = function (event) {
  console.error('数据库打开失败: ', event.target.errorCode);
};

是不是看的头大!

选型分析

目前有这几个比较火的封装库:localforagedexieidbidb-keyval

这几个的 npm 对比:npm-compare.com/dexie,idb,i...

简单总结下:

以下是 localForageDexie.jsidbidb-keyval 的区别、优缺点及适用场景对比:

简介 优点 缺点 适用场景
localForage 封装多种存储方式(IndexedDB、LocalStorage 等) 简单易用,兼容性好;自动选择最佳存储方式 不支持对象存储,多实例管理复杂 简单数据存储,兼容性要求高的项目
Dexie.js 功能丰富的 IndexedDB 封装库 支持事务、多对象存储;API 简洁;支持复杂查询 体积较大,学习曲线稍陡 复杂数据管理、多表结构的应用
idb 接近原生 IndexedDB API 的轻量封装 轻量,Promise API;较高性能 需熟悉 IndexedDB,复杂查询支持有限 对性能要求高,熟悉 IndexedDB 的项目
idb-keyval 简单的 key-value 存储库 极简 API,轻量,快速上手 仅支持单一存储,不支持多对象存储 简单键值对存储,快速开发的小项目

最终选择

问题:如果要支持类似表格查询的不同字段的查询,可以使用哪几个?

要支持类似表格查询、根据字段查询等功能,推荐使用 Dexie.jsidb,因为它们支持多字段查询和索引。

  • Dexie.js:特别适合复杂查询,支持链式查询、范围查询、索引等,类似 SQL 的查询语法,适合较复杂的数据表结构。
  • idb:虽然相对接近原生 IndexedDB,但它提供索引查询,支持更复杂的数据查找操作。

localForageidb-keyval 更适合简单键值存储,不支持多字段复杂查询。而且,localForage 本身并不支持直接创建多个对象存储(object store)。它封装了一个简单的 API,适合单一存储需求。但可以通过创建不同的 localForage 实例来实现类似多个对象存储的效果。

而 idb 写法类型 indexeddb,太复杂,所以最终选择 Dexie.js。

相关推荐
小威编程12 分钟前
uni-app应用级生命周期和页面级生命周期
前端·vue.js·uni-app
江-月*夜15 分钟前
uniapp vuex 搭建
android·javascript·uni-app
喝旺仔la22 分钟前
Django知识进阶
前端·html
啊QQQQQ30 分钟前
linux:回车换行+进度条+git理解与使用以及如何解决免密码push问题
开发语言·javascript·ecmascript
CL_IN35 分钟前
高效集成:聚水潭奇门至金蝶云星空的数据流自动化
java·前端·自动化
Ylucius37 分钟前
14天速成前端 ------学习日志(已完结)------ 后端程序员学习了解前端
java·开发语言·前端·vue.js·学习·状态模式·1024程序员节
真是6的不行41 分钟前
Hbuilder html5+沉浸式状态栏
前端·html·html5·hbuilder
熊的猫1 小时前
如何封装一个可取消的 HTTP 请求?
前端·javascript·vue.js·网络协议·http·webpack·node.js
超雄代码狂1 小时前
AJAX入门
前端·ajax
csdn小瓯2 小时前
前端八股文第一篇
前端·原型模式