前言
随着前端技术的发展，现在已经可以在浏览器端进行大部分的数据处理。因此，许多前端工程师需要了解如何构建基于浏览器的应用程序。而现在前端开发过程中必不可少的一个工具就是NPM包管理器。NPM包可以使我们在开发过程中更加高效便捷地完成各种任务。
在这篇文章中，我们将介绍一个重要的NPM包：digger-warehouse。它是一个用于构建基于浏览器的数据存储系统的工具，为我们提供了一种在客户端进行数据存储的方案。文章中将分别从以下几个方面介绍其使用教程：
- digger-warehouse 的介绍
- digger-warehouse 的安装
- digger-warehouse 的使用方法
- 示例代码
1. digger-warehouse 的介绍
根据其作者的描述，digger-warehouse 是一个构建在 IndexedDB 之上的对象存储库。IndexedDB 提供了可靠的数据存储功能，而 digger-warehouse 则在其基础上提供了一些重要的功能，在客户端以及与后端数据交互时非常有用。
digger-warehouse 提供了以下几个主要的功能：
- 在客户端存储数据
- 使用JSON对象存储数据
- 具有钩子函数来定制化处理数据
- 通用的 API 接口，支持大部分的 CRUD 操作
- 可以在浏览器中使用
一般来说，我们需要客户端的数据存储功能，数据远程交互，实时性以及数据操作的安全性，当然也需要能够在浏览器中以较快的速度操作数据。digger-warehouse 的出现，刚好推动了这个效果，为我们提供了一种很好的解决方案。
2. digger-warehouse 的安装
安装 digger-warehouse 非常简单，我们只需要使用 NPM 包管理器就能轻松完成安装：
npm install digger-warehouse
完成安装后，我们将可以在项目中使用 digger-warehouse。
3. digger-warehouse 的使用方法
- 连接 Warehouse
使用
digger-warehouse前，我们需要连接Warehouse以及表。通过调用warehouse.connect()方法件来创建Warehouse对象并建立到IndexedDB的连接。
-- -------------------- ---- -------
--- --------- - ----------------------------
--- --------- - --- ------------
--- ------ - ----------------------
--- ------ - ----------------------
----------------------------------
----------
------------------------ ----- --- -- ----------- -------
-
-----
---------------------- -- ------------
-
---- 创建记录
我们可以调用
createAPI 来创建一个新的记录：
-- -------------------- ---- -------
---------------
----- -------
---- ---
-- --------------- ----------
----------
--------------------- -- ------ --- -------- -------
-
-----
-------------------- --- -------- ----------
-
---- 读取记录
我们可以调用
readAPI 来读取指定的记录：
table1.read(['1', '2'], function(error, response){
if(error){
console.error('Failed to read records', error);
}
else{
console.log('Read records', response);
}
});- 更新记录
我们可以调用
updateAPI 来修改指定的记录：
-- -------------------- ---- -------
------------------ -
----- ------
---- ---
-- --------------- ----------
----------
--------------------- -- ------ -------- -------
-
-----
-------------------- -------- ----------
-
---- 删除记录
我们可以调用
removeAPI 来删除指定的记录：
table1.remove(['1', '2'], function(error, response){
if(error){
console.error('Failed to remove records', error);
}
else{
console.log('Removed records', response);
}
});- Hooks
digger-warehouse具有非常强大的钩子函数，它们可以用于在对记录进行操作前和操作后做一些处理。有precreate，postcreate，preupdate，postupdate，preremove和postremove。这里只演示postcreate的例子。
-- -------------------- ---- -------
-- - ------ ---- ---------- ----
----------------------------------- ------
----------------- ------ ------------
---------------------
---------- ---------
---
---------------
----- ------
---- ---
-- --------------- ----------
----------
--------------------- -- ------ --- -------- -------
-
-----
-------------------- --- -------- ----------
-
---4. 示例代码
下面是一个使用 digger-warehouse 将数据存储到 IndexedDb 的示例代码：
-- -------------------- ---- -------
--- --------- - ----------------------------
--- --------- - --- ------------
--- ----- - -------------------
-- -- ---------
--------------------------------- -
-- ------- -
------------------------ ----- --- -- ----------- -------
- ---- -
---------------------- -- ------------
-
---
-- ----
--------------
----- -------
---- --
-- --------------- ------- -
-- ------- -
--------------------- -- ------ ------ -------
- ---- -
-------------------- ------ --------
-
---
-- ----
----------------- -
----- ------
---- --
-- --------------- ------- -
-- ------- -
--------------------- -- ------ ------ -------
- ---- -
-------------------- ------ --------
-
---
-- ----
----------------- --------------- ------- -
-- ------- -
--------------------- -- ------ ------ -------
- ---- -
-------------------- ------ --------
-
---
-- ----
----------------------------------- ----- -
----------------- ------ ------------
----------------------
---------- ----------
---
--------------
----- -------
---- --
-- --------------- ------- -
-- ------- -
--------------------- -- ------ ------ -------
- ---- -
-------------------- ------ --------
-
---综上所述，digger-warehouse 在浏览器端提供了一个可靠的客户端数据存储方案，可以让前端工程师在开发过程中更加高效、便捷地完成各种任务。我们可以通过本文的介绍和示例代码，学习并实践怎样使用它来存储和操作数据。当然这篇文章只是一个介绍教程，如需深入学习和更多使用方法请参考其官方文档或自行查找相关资料。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/88152