Vue中使用IndexDB

IndexedDB 是一个面向对象的数据库系统，专为大量结构化数据的客户端存储而设计。它解决了 localStorage 的所有核心痛点，并提供了更多高级功能，如：

1. 异步操作，性能更优；
2. 更强大的存储能力：几乎没有存储上限（通常在 50MB 到数百 MB 之间），可直接存储 JavaScript 对象，无需手动序列化；
3. 强大的查询与索引能力

尽管 IndexedDB 功能强大，但原生 API 较为复杂。下面简单使用localforage工具库

1. 安装 npm install localforage

2. main.js中引入

import localforage from "localforage";
Vue.use(localforage);
Vue.prototype.$localforage = localforage;
// 创建一个 默认的 IndexDB数据库挂载到全局
const demoDataBase = localforage.createInstance({
  name: "demoDataBase",
});
Vue.prototype.$demoDataBase = demoDataBase;

3. 设置值与获取值

 // 新增数据(根据需要看是否需要回调)
 this.$demoDataBase.setItem("name", "我是测试值").then(name => {
      console.log("设置上了：", name);
      // 获取数据
      this.$demoDataBase.getItem("name").then(v => {
        console.log("获取到了：", v);
      });
 });