如何在React.js中使用IndexedDB存储API获取的大规模电商数据

针对电商场景下数千条结构化API数据、跨页面/刷新不丢失的需求，各方案适配性如下：

• localStorage/sessionStorage：单域名默认容量仅5MB左右，存放带详情、SKU、库存信息的商品数据极易触达容量上限，且同步读写大体积数据会阻塞主线程，不适合该场景。
• Cookie：单条存储上限仅4KB，且每次域名请求都会自动携带，完全不适合存大体积业务数据。
• IndexedDB：浏览器原生内置的事务型结构化数据库，单域名默认可用容量可达磁盘剩余空间的10%以上，支持异步读写、索引快速查询，可稳定承载数万条业务数据，是当前场景下的最优选择。开发时也可以选择经过封装的IndexedDB工具库降低原生API的繁琐度，减少重复造轮子的成本。

核心流程分3步：

1. 初始化数据库连接：自定义数据库名、版本号，创建商品对应的存储表（Object Store），指定业务主键（如商品ID），按需创建分类、价格等字段索引，提升后续查询效率。
2. 批量写入流程：API拉取到全量商品数组后，开启IndexedDB读写事务，将数千条数据拆分为500条左右的小批次逐批写入，避免单事务持有过久被浏览器自动终止。
3. 缓存读取流程：页面刷新/跳转时，优先从IndexedDB读取存量数据完成首屏渲染，后台再触发API拉取最新数据覆盖本地缓存，避免接口等待导致的白屏问题。

第一步：封装IndexedDB基础工具 #

新建独立的数据库操作模块，统一处理连接、写入、读取逻辑：

// utils/database.js
const DB_NAME = 'ecommerce_local_store';
const DB_VERSION = 1;
const PRODUCT_STORE_KEY = 'product_list';

// 初始化数据库连接
function connectDB() {
  return new Promise((resolve, reject) => {
    const dbRequest = indexedDB.open(DB_NAME, DB_VERSION);
    
    // 数据库版本变更时创建存储表
    dbRequest.onupgradeneeded = (event) => {
      const db = event.target.result;
      if (!db.objectStoreNames.contains(PRODUCT_STORE_KEY)) {
        // 以业务侧productId为主键，无需自增
        const productStore = db.createObjectStore(PRODUCT_STORE_KEY, { keyPath: 'productId' });
        // 创建常用查询索引
        productStore.createIndex('categoryId', 'categoryId', { unique: false });
      }
    };

    dbRequest.onsuccess = (event) => resolve(event.target.result);
    dbRequest.onerror = (error) => reject(error);
  });
}

// 批量保存商品数据到IndexedDB
export async function saveProductsToDB(products) {
  const db = await connectDB();
  const writeTransaction = db.transaction(PRODUCT_STORE_KEY, 'readwrite');
  const store = writeTransaction.objectStore(PRODUCT_STORE_KEY);
  const BATCH_SIZE = 500; // 拆分批次避免单事务压力过大

  for (let i = 0; i < products.length; i += BATCH_SIZE) {
    const currentBatch = products.slice(i, i + BATCH_SIZE);
    currentBatch.forEach(item => store.put(item)); // put支持存在即更新、不存在即新增，避免重复写入报错
  }

  return new Promise((resolve, reject) => {
    writeTransaction.oncomplete = () => resolve(true);
    writeTransaction.onerror = (error) => reject(error);
  });
}

// 从IndexedDB读取商品缓存
export async function getProductsFromDB() {
  const db = await connectDB();
  const readTransaction = db.transaction(PRODUCT_STORE_KEY, 'readonly');
  const store = readTransaction.objectStore(PRODUCT_STORE_KEY);
  const queryRequest = store.getAll();

  return new Promise((resolve, reject) => {
    queryRequest.onsuccess = (event) => resolve(event.target.result);
    queryRequest.onerror = (error) => reject(error);
  });
}

第二步：在商品列表组件中调用使用 #

// pages/ProductList.jsx
import { useEffect, useState } from 'react';
import { saveProductsToDB, getProductsFromDB } from '@/utils/database';

export default function ProductList() {
  const [products, setProducts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function initPageData() {
      setIsLoading(true);
      // 优先读取本地缓存完成首屏渲染
      const cachedProducts = await getProductsFromDB();
      if (cachedProducts.length) {
        setProducts(cachedProducts);
        setIsLoading(false);
      }

      // 拉取API最新全量商品数据
      const response = await fetch('/api/products?pageSize=10000');
      const latestProducts = await response.json();
      
      // 将最新数据写入本地IndexedDB，供后续页面刷新/跳转使用
      await saveProductsToDB(latestProducts);
      
      setProducts(latestProducts);
      setIsLoading(false);
    }

    initPageData();
  }, []);

  if (isLoading) return <div className="loading">数据加载中...</div>;

  return (
    <div className="product-grid">
      {products.map(item => (
        <div className="product-card" key={item.productId}>
          <h4>{item.name}</h4>
          <p>售价：¥{item.price}</p>
        </div>
      ))}
    </div>
  );
}

• 避免单次事务写入全量数千条数据：IndexedDB对单次事务的持有时间有自动超时限制，拆分批次提交可大幅提升写入稳定性。
• 写入操作优先使用put而非add：后者遇到同主键数据会直接报错中断，put可自动覆盖旧数据，适配缓存更新的场景需求。
• 不要把非持久化的临时交互状态存入IndexedDB：仅将需要跨页面、跨刷新保留的API数据存入，临时状态搭配内存状态管理工具维护即可，减少不必要的数据库读写。
• 大规模数据更新时尽量做差异对比：不要每次API返回就全量覆盖本地缓存，可通过数据版本号、最后更新时间字段判断差异，减少写入开销。

内容的提问来源于stack exchange，提问作者Vibha Singh