Javascript IndexedDB（Dexie.js） React 存储大量（5-50M）的完整示例

将 IndexedDB 整合到 React 应用中，可以为你的应用提供高效的客户端存储解决方案，特别适用于需要存储大量结构化数据或离线功能的场景。为了简化 IndexedDB 的使用，通常推荐使用封装好的库，如 Dexie.js 或 idb。这些库提供了更简洁和友好的 API，方便在 React 中进行集成。

下面，我将详细介绍如何使用 Dexie.js 将 IndexedDB 整合到 React 应用中，并创建一个自定义钩子来管理数据库操作。

1. 安装 Dexie.js

首先，安装 Dexie.js 库：

npm install dexie

或使用 yarn：

yarn add dexie

2. 设置 Dexie 数据库

创建一个单独的文件来配置和初始化 Dexie 数据库，例如 db.js。

// src/db.js
import Dexie from 'dexie';// 创建数据库
const db = new Dexie('MyReactAppDB');// 定义数据库的结构
db.version(1).stores({users: '++id, name, email', // 表示自动递增的主键 'id'，以及索引字段 'name' 和 'email'posts: '++id, title, content, userId'
});// 可选：打开数据库
db.open().catch((err) => {console.error('Failed to open db:', err.stack || err);
});export default db;

解释：

数据库名称：MyReactAppDB。
对象存储区（Tables）：users 和 posts。
索引：users 表有 id（自动递增）、name 和 email 作为索引。

3. 创建 React 上下文（Context）

为了在整个 React 应用中方便地访问数据库，可以创建一个上下文。

// src/contexts/DBContext.js
import React, { createContext } from 'react';
import db from '../db';export const DBContext = createContext();export const DBProvider = ({ children }) => {return (<DBContext.Provider value={db}>{children}</DBContext.Provider>);
};

4. 创建自定义钩子（Hook）

为了简化在组件中进行数据库操作，可以创建自定义钩子。例如，创建一个 useUsers 钩子来管理 users 表的数据。

// src/hooks/useUsers.js
import { useState, useEffect, useContext } from 'react';
import { DBContext } from '../contexts/DBContext';const useUsers = () => {const db = useContext(DBContext);const [users, setUsers] = useState([]);const [loading, setLoading] = useState(true);// 获取所有用户const fetchUsers = async () => {setLoading(true);const allUsers = await db.users.toArray();setUsers(allUsers);setLoading(false);};// 添加新用户const addUser = async (user) => {await db.users.add(user);fetchUsers(); // 更新用户列表};// 更新用户const updateUser = async (id, updatedFields) => {await db.users.update(id, updatedFields)