npm 包 @neoprospecta/angular-local-database 使用教程

前言

在现代的前端开发中，数据是一个非常重要的组成部分。而对于某些应用来说，只是需要在本地收集和保存数据，这时候使用传统的后端数据库平台可能会增加复杂度。而 @neoprospecta/angular-local-database 就是一个可以帮助开发者在前端通过浏览器存储和管理数据的 npm 包。

环境要求

在使用 @neoprospecta/angular-local-database 之前，需要确保其所依赖的 @angular/core 和 rxjs 包已经被安装并且是在 ng6+ 应用程序中。

安装

使用 npm 工具可以在命令行中直接安装 @neoprospecta/angular-local-database：

npm install @neoprospecta/angular-local-database --save

快速上手

在安装完 @neoprospecta/angular-local-database 后，在组件文件中 import 该模块：

import { LocalDatabase } from '@neoprospecta/angular-local-database';

然后在组件的 constructor 中使用注入方式注入 LocalDatabase 类：

constructor(private localDb: LocalDatabase) {}

接下来就可以开始使用 LocalDatabase 类提供的方法了。如下图所示是它的方法列表：

即可通过 LocalDatabase 类方法来完成浏览器的存储操作。其中最常用的方法是 set 和 get，分别用于向浏览器存储数据和从浏览器中获取数据：

this.localDb.set('key', 'value').subscribe(val => console.log('set', val));
this.localDb.get('key').subscribe(val => console.log('get', val));

需要特别注意的是，LocalDatabase 的存储是基于 key-value 构建的，即每个存储的值都有一个唯一的键。因此，存储和获取数据需要使用相同的键：

this.localDb.set('username', 'Neo').subscribe(val => console.log('set', val));
this.localDb.get('username').subscribe(val => console.log('get', val)); // output: get Neo

此外，LocalDatabase 还可以帮助我们管理多个数据对象，可以通过 group 参数来指定一个数据对象的名称，之后所有的存储、获取数据操作都将作用于这个数据对象中：

this.localDb.set('username', 'Neo', { group: 'userData' }).subscribe(val => console.log('set', val));
this.localDb.get('username', { group: 'userData' }).subscribe(val => console.log('get', val)); // output: get Neo

数据可观测性

@neoprospecta/angular-local-database 通过 RxJS 的 Observable 格式提供了数据的可观测性。这意味着，如果应用程序中的某个数据对象存储了一些数据，那么一旦这个数据对象被更改，就可以通过订阅该数据对象并获取一个可观测的数据流以通知我们：

this.localDb.set('username', 'Neo', { group: 'userData' }).subscribe(val => console.log('set', val));
this.localDb.observe('username', { group: 'userData' }).subscribe(val => console.log('observe', val)); // output: observe Neo

当 'observe' 订阅被调用时，可以通过 observable 回调函数获取到每个数据库更改的信息。例如，当执行以下代码时：

this.localDb.set('username', 'Trinity', { group: 'userData' }).subscribe(val => console.log('set', val));

则会有如下的订阅输出：

observe Neo
observe Trinity

数据过期时间

LocalDatabase 还提供了一种在数据到期时自动删除数据的功能。使用 set 方法时可以通过 { expire: n } 选项设置一个以毫秒为单位的过期时间：

this.localDb.set('username', 'Neo', { group: 'userData', expire: 5000 }).subscribe(val => console.log('set', val));

setTimeout(() => {
  this.localDb.get('username', { group: 'userData' }).subscribe(val => console.log('get', val)); // output: get null
}, 6000);

在此示例中，存储了一个名为 username 的值 Neo，并设置了过期时间为 5 秒。在 6 秒后，尝试获取 username 的值发现已经为空。

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