1. 背景
在 web 前端开发中，使用本地存储来缓存数据是一个经常使用的技巧。而 es6-localdb 这个 npm 包，提供了一种方便简单的方式来使用本地存储。在这篇文章中，我们将介绍如何使用 es6-localdb 来管理本地数据。
2. es6-localdb 基本介绍
es6-localdb 是一个基于浏览器本地存储 API 的 npm 包。它提供了一套简洁的 API，使得我们可以方便地实现本地数据的存储、更新、删除等操作。es6-localdb 支持多种存储方式，包括 localStorage、sessionStorage、IndexedDB、WebSQL 等。另外，es6-localdb 还提供了面向对象的接口，使得我们可以轻松地操作和管理存储的数据。
3. es6-localdb 使用教程
3.1 安装
在使用 es6-localdb 之前，我们首先需要安装它。按照惯例，我们可以使用 npm 来安装 es6-localdb。使用以下命令即可将 es6-localdb 安装到本地项目中：
npm install --save es6-localdb
3.2 初始化
在引入 es6-localdb 模块之后，我们可以开始对其进行初始化。
import { LocalDB } from 'es6-localdb';
const db = new LocalDB('dbName', 'localStorage');上面代码中，我们使用 import 关键字来引入 LocalDB 类，创建了一个 LocalDB 对象，并将其赋值给了变量 db。我们可以看到，LocalDB 类的构造函数接受两个参数。第一个参数是 dbName，表示数据库名称；第二个参数是 storageType，表示存储类型，可以是 localStorage、sessionStorage、IndexedDB、WebSQL 中的任意一个。
3.3 操作数据
在 es6-localdb 中，数据的操作是通过对 LocalDB 对象的方法调用来完成的。以下是一些常见的方法：
3.3.1 add method
add method 用于向存储中添加一条数据。
db.add('userList', { name: '张三', age: 18 })
.then(() => {
console.log('add success!')
})
.catch((error) => {
console.error('add error!', error)
})上面代码中，我们使用 add 方法将一个对象添加到了名为 userList 的数据集合中。在 add 方法的回调函数中，我们可以检查操作的结果，如果成功则输出 'add success!'，否则输出错误信息。
3.3.2 get method
get method 用于从存储中获取一条数据。
db.get('userList', 'name', '张三')
.then((result) => {
console.log(result)
})
.catch((error) => {
console.error('get error!', error)
})上面代码中，我们使用 get 方法从名为 userList 的数据集合中获取 name 值为 '张三' 的数据。在 get 方法的回调函数中，我们可以检查操作的结果，将获取到的数据输出出来。
3.3.3 update method
update method 用于修改存储中的数据。
db.update('userList', 'name', '张三', { age: 19 })
.then(() => {
console.log('update success!')
})
.catch((error) => {
console.error('update error!', error)
})上面代码中，我们使用 update 方法修改了名为 userList 的数据集合中 name 值为 '张三' 的数据的 age 属性。在 update 方法的回调函数中，我们可以检查操作的结果，如果成功则输出 'update success!'，否则输出错误信息。
3.3.4 delete method
delete method 用于删除存储中的数据。
db.delete('userList', 'name', '张三')
.then(() => {
console.log('delete success!')
})
.catch((error) => {
console.error('delete error!', error)
})上面代码中，我们使用 delete 方法删除了名为 userList 的数据集合中 name 值为 '张三' 的数据。在 delete 方法的回调函数中，我们可以检查操作的结果，如果成功则输出 'delete success!'，否则输出错误信息。
4. 总结
以上就是 es6-localdb 的基本使用教程。它为我们提供了一种方便简单的方式来使用本地存储。除了上述的操作，es6-localdb 还提供了一些其它的 API 接口，使得我们可以更加灵活地操作本地数据。希望这篇文章能够对初学者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ccc81e8991b448e656c