npm 包 idb-promise 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

idb-promise 是一个用于 Web IndexedDB 接口的 Promise 封装库。它可以帮助我们更方便地对 IndexedDB 进行操作，从而提高前端开发效率。

在本文中，我们将学习如何使用 idb-promise 来进行数据的增、删、改、查操作，并提供一些实际应用场景的示例代码。

安装使用

使用 npm 包管理器可快速安装 idb-promise：

npm install idb-promise

引入库：

import idb from 'idb-promise';

初始化 IndexedDB

在使用 idb-promise 前，需要初始化 IndexedDB：

const dbPromise = idb.open('myDatabase', 1, (upgradeDB) => {
  upgradeDB.createObjectStore('myObjectStore');
});

dbPromise 是我们异步获取数据库的 promise 对象。
open() 方法接收三个参数：
1. name：数据库名称。
2. version：数据库版本，用于控制数据库升级。
3. createObjectStore 回调函数：用于在创建新数据库时指定对象存储区的结构。

对象存储区操作

添加数据

dbPromise.then((db) => {
  const tx = db.transaction('myObjectStore', 'readwrite');
  tx.objectStore('myObjectStore').put({ id: 1, name: 'apple' });
  return tx.complete;
}).then(() => {
  console.log('Successfully added data!');
});

dbPromise.then() 用于获取数据库。
transaction() 方法接收两个参数：
1. 对象存储名称。
2. 事务模式，可选值有 "readonly" 和 "readwrite"。
objectStore() 方法用于操作指定的对象存储。
put() 方法用于添加或更新数据。
complete 用于表示事务完成并提交更改。

读取数据

dbPromise.then((db) => {
  const tx = db.transaction('myObjectStore', 'readonly');
  const store = tx.objectStore('myObjectStore');
  return store.get(1);
}).then((data) => {
  console.log(data); // { id: 1, name: 'apple' }
});

get() 方法用于读取数据。

更新数据

dbPromise.then((db) => {
  const tx = db.transaction('myObjectStore', 'readwrite');
  tx.objectStore('myObjectStore').put({ id: 1, name: 'banana' });
  return tx.complete;
}).then(() => {
  console.log('Successfully updated data!');
});

put() 方法用于添加或更新数据。

删除数据

dbPromise.then((db) => {
  const tx = db.transaction('myObjectStore', 'readwrite');
  tx.objectStore('myObjectStore').delete(1);
  return tx.complete;
}).then(() => {
  console.log('Successfully deleted data!');
});

delete() 方法用于删除数据。

实际应用场景

以保存待办事项的应用为例：

初始化 IndexedDB

const dbPromise = idb.open('todoDatabase', 1, (upgradeDB) => {
  if (!upgradeDB.objectStoreNames.contains('todoList')) {
    upgradeDB.createObjectStore('todoList', { keyPath: 'id', autoIncrement: true });
  }
});

创建名为 "todoList" 的对象存储区。

添加待办事项

-- -------------------- ---- -------
--------- -
  ----- ---- - - ----- ----------------- ---------- ------ ---------- --- ---------------- --
  ------------------------ -- -
    ----- -- - -------------------------- -------------
    -------------------------------------
    ------ ------------
  ---------- -- -
    ---------------- - ---
    -------------------
  ---
--

put() 方法添加事项。

获取待办事项

-- -------------------- ---- -------
------------- -
  ------------------------ -- -
    ----- -- - -------------------------- ------------
    ----- ----- - ---------------------------
    ------ ---------------
  ------------------ -- -
    ------------- - ---------
  ---
-

getAll() 方法获取事项列表。

更新待办事项

-- -------------------- ---- -------
---------------------- -
  ------------------------ -- -
    ----- -- - -------------------------- -------------
    -------------------------------------
    ------ ------------
  ---------- -- -
    -------------------
  ---
-

put() 方法更新数据。

删除待办事项

-- -------------------- ---- -------
-------------------- -
  ------------------------ -- -
    ----- -- - -------------------------- -------------
    -------------------------------------------
    ------ ------------
  ---------- -- -
    -------------------
  ---
-

delete() 方法删除数据。

总结

以上是使用 idb-promise 对 IndexedDB 进行数据操作的详细教程与实际应用场景。IndexedDB 具有浏览器端存储能力，适用于各种离线应用、数据缓存及本地存储等场景，并且用 idb-promise 可以更方便地进行前端操作。我们应当结合实际需求，灵活运用 IndexedDB 和 idb-promise 库进行前端数据处理。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005749381e8991b448ea165