React之IndexedDB之Dexie

React之IndexedDB之Dexie

一、概述

IndexedDB 是一个基于 JavaScript 的面向对象数据库，类似于基于 SQL 的 RDBMS，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。

我们这里使用Dexie.js来操作IndexedDB。

二、使用

1. 官方文档：https://dexie.org/docs/Tutorial/React

2. 示例

   • 创建数据库

     import Dexie, { Table } from 'dexie';
     
     export interface Friend {
       id?: number;
       name: string;
       age: number;
     }
     
     export class MySubClassedDexie extends Dexie {
       friends!: Table<Friend>; 
     
       constructor() {
         super('myDatabase');
         this.version(1).stores({
           friends: '++id, name, age'
         });
       }
     }
     
     export const db = new MySubClassedDexie();
     

     • 表会在调用stores方法时自动创建
     • 声明表字段的时候，只需要声明索引字段即可，也就是需要where查询的字段

   • 使用

     • 查询

       // 多结果
       const friends = await db.friends.where({ name: 'xxx' }).toArray();
       // 单结果
       const friend = await db.friends.where({ name: 'xxx' }).first();
       // 限制结果数
       const friends = await db.friends.where({ name: 'xxx' }).limit(2).toArray();
       // 排序
       const friends = await db.friends.where({ name: 'xxx' }).sortBy('id').toArray();
       

     • 新增

       const id = await db.friends.add({name: "xxx", age: 18});
       // 批量
       await db.friends.bulkAdd([{name: "xxx", age: 18}]);
       

     • 修改

       await db.friends.where({ id: 1 }).modify({ name: changes.name });
       

     • 删除

       await db.friends.delete(id);
       // 批量
       await db.friends.bulkDelete(ids);
       

     • 事务

       db.transaction('rw', db.friends, db.tests, async () => {
           await db.friends.where({ id: 1 }).modify({ name: changes.name });
           await db.tests.where({ id: 1 }).modify({ name: changes.name });
         });