当前位置：首页 > article >正文

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

article 2025/3/1 21:15:17

将 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)