如何优雅的使用indexDb？

项目中为了缓存大量的商品数据，决定使用indexDB，至于为什么使用indexDB，可以看这篇文章

为什么我建议使用indexDb？

回归正题，如何优雅的使用indexDb呢，这就不得不说这个插件了：Dexie.js

Dexie.js 是一个轻量级的 JavaScript 库，旨在简化浏览器中 IndexedDB 的使用， 通过提供更直观、更易于使用的 API，帮助开发者更高效地利用 IndexedDB 的功能。

Dexie.js有多轻量呢？

    看截图，压缩后只有29k，确实不大

Dexie.js功能有哪些呢？

    1、提供了一个更简洁、更易读的 API，减少了开发者在处理 IndexedDB 时的复杂性。

    2、支持 Promise，使得异步操作更加直观和易于管理。

    3、提供了批量添加、更新和删除数据的方法，显著提高了数据操作的性能。

    4、支持复杂的查询操作，如范围查询、排序和过滤，帮助开发者更高效地检索数据。

    5、兼容所有主流浏览器，包括 Chrome、Firefox、Safari 和 Edge。

    6、支持事务操作，可以确保数据的一致性和完整性。

Dexies.js的使用方法？

    安装：

        npm install dexie

    创建数据库

        import Dexie from 'dexie'
        const db = new Dexie('userDB'); // 创建了一个名为userDB的一个数据库

    创建表（Table）

        import type { Table } from 'dexie'

        db.version(1).stores({      // 初始化数据库时，默认版本从1开始，后续维护每次数据库结构发生变化时，版本号应相应增加
              users: '++id, userName',   // 创建users表，具有一个名为id的自增长主键字段，以及一个名为userName的索引
        });

        let users: Table<StoreLevelData>

        users = db.table('users')  // 获取users表格，该方法等同于 users = db.users

        另外，虽然我们用的是1版本，但是当你通过开发者工具查看的时候，会发现版本是10，这是因为dexie数据库将获得给定的版本号乘以10。

        增加数据

            db.users.add({        
                      userName: 'zhangsan'
            })

       修改数据

            db.users.put({  // 相当于后端数据库里面的upsert，即：不存在则新增，存在则修改。
                  id: 1,
                  userName: 'zhangsan'
             })

        删除数据

          db.users.delete(1)

        查询数据

            db.users.get(1).then(res=>console.log(res))  // 通过主键来查询
            db.users.where({userName: "zhangsan"})   // 通过条件来查询
            db.users.orderBy('id').first() // 查询第一条
            db.users.orderBy('id').last() // 查询第一条
            db.users.count() // 查询表的行数
            db.users.orderBy('id').reverse().offset(0).limit(100).toArray() // 分页查询

       其他API

                above(key): Collection;    // 指定条件为大于  
                aboveOrEqual(key): Collection;  // 指定条件为大于或等于
                add(item, key?): Promise;   // 添加数据
                and(filter: (x) => boolean): Collection;  // 添加并且条件
                anyOf(keys[]): Collection;  // anyOf则允许我们传入一个值的数组，表示希望匹配其中任何一个值
                anyOfIgnoreCase(keys: string[]): Collection;  // 在索引中搜索与任何给定字符串匹配的键，忽略英文字母a-z、a-z的大小写差异。
                below(key): Collection; // 查询数据库中某个字段的值小于指定值的所有记录
                belowOrEqual(key): Collection;  // 查询数据库中某个字段的值小于或等于指定值的所有记录
                between(lower, upper, includeLower?, includeUpper?): Collection;   // 筛选出在指定范围内的数据项
                bulkAdd(items: Array): Promise; // 用于批量添加数据到数据库表的方法
                bulkDelete(keys: Array): Promise; // 用于批量删除数据的方法
                bulkPut(items: Array): Promise;  // 用于批量更新或插入数据到数据库表中
                clear(): Promise; // 清空数据库
                count(): Promise; // 用于统计数据库中符合特定条件的记录数量
                delete(key): Promise; // 删除数据
                distinct(): Collection;  // 删除集合中主键的任何重复项。仅在处理多值索引时有用
                each(callback: (obj) => any): Promise; // 在隐式单个只读事务中迭代集合中的所有对象
                eachKey(callback: (key) => any): Promise; // 用于遍历表中所有主键的方法
                equals(key): Collection; // 指定条件为等于 
                equalsIgnoreCase(key): Collection;  // 指定条件为等于 ，忽略英文字母a-z、a-z的大小写差异。
                filter(fn: (obj) => boolean): Collection;  // 过滤数据
                first(): Promise;  // 取第一条数据
                get(key): Promise;  // 获取具有给定primaryKey或满足给定条件（{keyPath1:value1，keyPath2:value2}）的对象，并返回第一个匹配结果。
                inAnyRange(ranges): Collection; // 允许你执行范围查询，检查某个字段的值是否落在指定的一个或多个范围内
                keys(): Promise; // 回调函数将收到一个数组，其中包含集合中正在索引的索引的所有键
                last(): Promise; // 取最后一条数据
                limit(n: number): Collection; // 用于分页查询
                modify(changes: { [keyPath: string]: any } ): Promise; // 修改数据
                noneOf(keys: Array): Collection; // 用于查询不匹配指定值的记录
                notEqual(key): Collection; // 用于过滤不等于条件
                offset(n: number): Collection; //   用于跳过查询结果中的前N条记录
                or(indexOrPrimayKey: string): WhereClause; // 添加或条件
                orderBy(index: string): Collection; // 用于对数据库表中的记录进行排序
                primaryKeys(): Promise; // 用于获取表中所有主键的一个便捷方式
                put(item: T, key?: Key): Promise; // 用于更新或插入数据到数据库表中
                reverse(): Collection;  // 反转查询结果的顺序
                sortBy(keyPath: string): Promise; // 排序
                startsWith(key: string): Collection; // 指定条件为以给定字符串开始
                startsWithAnyOf(prefixes: string[]): Collection; // 指定条件为以给定字符串开始匹配其中任何一个值
                startsWithAnyOfIgnoreCase(prefixes: string[]): Collection; // 指定条件为以给定字符串开始匹配其中任何一个值,不区分大小写
                startsWithIgnoreCase(key: string): Collection; // 指定条件为以给定字符串开始,不区分大小写
                toArray(): Promise;   // 如果省略了回调并且操作成功，返回的Promise将使用操作的结果进行解析，调用任何Promise.then（）回调。
如果指定了回调并且操作成功，则将调用给定的回调，返回的Promise将使用给定回调的返回值进行解析。
如果操作失败，返回的promise将拒绝，并调用任何promise.catch（）回调。
                toCollection(): Collection; // 返回一个未经筛选的Collection实例，其中包含存储中的所有对象。
                uniqueKeys(): Promise; // 检索集合中所有唯一索引的数组。
                until(filter: (value) => boolean, includeStopEntry?: boolean): Collection; //  其工作原理类似于limit（），但不是指定一个数字，而是指定一个过滤器函数对每个项目执行，当它返回true时，迭代将停止。
                update(key: Key, changes: { [keyPath: string]: any }): Promise; // 修改数据