Vue:调用浏览器数据库

在前一段时间写项目的时候，需要本地存储大量数据，需要在客户端进行数据存储、离线访问以及数据同步等，对本地数据的储存和管理非常重要。因此考虑使用了IndexedDB，但是接使用 IndexedDB API ，非常麻烦，需要写很多代码。而且非常怀念简单LocalStorage

Dexie.js这是一个强大、简单的?JavaScript?库，它对 IndexedDB 进行了封装，让我可以很轻松地管理浏览器端的数据。访问地址

Dexie.js 技术特性

数据更容易管理

Dexie.js 提供简洁的?API，让我们可以轻松创建、打开、查询和管理 IndexedDB 数据库。我们不仅可以定义数据模式，包括表格和索引，而且随着 web 项目的发展迭代，还可以方便地进行数据库版本升级。

Promise 异步支持

和 IndexedDB 原生 API 一样，Dexie.js 的操作也是异步的，而且是用?Promise?来处理异步操作，可以直接在数据库操作后执行使用?then() 方法处理结果，或者使用?async/await?语法来更清晰地处理异步操作，编写和维护代码非常优雅。

数据查询

Dexie.js 支持复杂的查询操作，包括过滤、排序、范围查询等，完全不需要编写那些的低级 IndexedDB 代码，数据检索和处理非常优雅灵活。

浏览器兼容性好

Dexie.js 支持主流的现代浏览器，包括?Chrome、Firefox、Edge?和 Safari 等，手机端上也得到了很多的支持，不用担心兼容性问题。

轻量级

Dexie.js 是一个轻量级的库，体积小巧，加载速度快，没有其他依赖。

1.安装

npm install dexie

2.创建数据库?

// 导入Dexie库

import Dexie from 'dexie';

// 创建一个数据库实例

const db = new Dexie('testDatabase');?

3.定义数据表格?

db.version(1).stores({ friends: '++id, name, age' });?

4.插入数据

db.friends.add({ name: '张三', age: 30 }); db.friends.add({ name: '李四', age: 25 });?

5.查询数据?

?db.friends .where('age') .above(28) .toArray() .then(friends => { console.log('超过28岁的朋友:', friends); });