nodejs34: react中的IndexedDB 数据库遍历 + 实现对数据库的复制与更新

原创已于 2025-09-06 10:36:07 修改 · 281 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #数据库 #javascript

于 2024-12-12 19:00:51 首次发布

前端相关专栏收录该内容

40 篇文章

订阅专栏

IndexedDB 数据库遍历

  // 读取指定存储对象"表格"的数据
  const readTableData = async (TableName) => {
    try {
      const db = await openDB(DB_NAME, DB_VERSION);
      console.log(db,"db")
      const tx = db.transaction(TableName, 'readonly');
      const store = tx.objectStore(TableName);
      const items = await store.getAll();
      console.log(`${TableName}的数据:`, items);
      return items;
    } catch (error) {
      console.error(`读取${TableName}数据时出错:`, error);
      return [];
    }
  };

    // 读取所有数据
    const readAllDBData = async () => {
      try {
        const db = await openDB(DB_NAME, DB_VERSION);
        const tableNames = await db.objectStoreNames;// 一个DOMStringList对象 https://developer.mozilla.org/zh-CN/docs/Web/API/DOMStringList
        // 遍历所有省份的DOMStringList
        for (const v of tableNames) {
          const items = await readTableData(v);
          console.log(`${v}的数据:`, items);
        }
        return null;
      } catch (error) {
        console.error(`读取数据时出错:`, error);
        return [];
      }
    };

完整React代码

import React, { useState } from 'react';
import { openDB } from 'idb';  // 确保你已经安装了 idb 库来操作 IndexedDB

const DB_NAME = 'yourDBName'; // 请根据你的实际情况替换
const DB_VERSION = 1; // 请根据你的实际情况替换

function App() {
  const [data, setData] = useState([]);

  // 读取指定存储对象"表格"的数据
  const readTableData = async (TableName) => {
    try {
      const db = await openDB(DB_NAME, DB_VERSION);
      console.log(db, "db");
      const tx = db.transaction(TableName, 'readonly');
      const store = tx.objectStore(TableName);
      const items = await store.getAll();
      console.log(`${TableName}的数据:`, items);
      return items;
    } catch (error) {
      console.error(`读取${TableName}数据时出错:`, error);
      return [];
    }
  };

  // 读取所有数据
  const readAllDBData = async () => {
    try {
      const db = await openDB(DB_NAME, DB_VERSION);
      const tableNames = Array.from(db.objectStoreNames);  // 将DOMStringList转化为数组
      const allData = [];
      // 遍历所有表名
      for (const tableName of tableNames) {
        const items = await readTableData(tableName);
        allData.push({ tableName, items });
        console.log(`${tableName}的数据:`, items);  // 打印每个表的数据
      }
      setData(allData); // 设置读取的数据
    } catch (error) {
      console.error('读取数据时出错:', error);
    }
  };

  return (
    <div>
      <h1>数据库数据读取</h1>
      <button onClick={readAllDBData}>读取所有数据</button>
      <div>
        {data.length > 0 && (
          <div>
            <h2>读取的所有数据：</h2>
            <ul>
              {data.map((tableData, index) => (
                <li key={index}>
                  <h3>{tableData.tableName}</h3>
                  <pre>{JSON.stringify(tableData.items, null, 2)}</pre>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

实现对数据库的复制与更新

import React, { useState } from 'react';
import { openDB } from 'idb';  // 确保你已经安装了 idb 库来操作 IndexedDB

const DB_NAME = '**';
const DB_VERSION = 2;//!!!

const NEW_DB_NAME = '***';
const NEW_DB_VERSION = 3;//!!!

function App() {
  const [data, setData] = useState([]);


  // 数据库结构复制
  const copyDatabaseStructure = async (sourceDBName, targetDBName, dbVersion) => {
    try {
      // 打开源数据库
      const sourceDB = await openDB(DB_NAME, DB_VERSION);
      // 打开目标数据库
      const targetDB = await openDB(targetDBName, dbVersion, {
        upgrade(db) {
          // 获取源数据库的所有表格结构
          const sourceTableNames = Array.from(sourceDB.objectStoreNames);

          sourceTableNames.forEach((tableName) => {
            const store = sourceDB.transaction(tableName, 'readonly').objectStore(tableName);
            const newStore = db.createObjectStore(tableName, {
              keyPath: store.keyPath,
              // autoIncrement: store.autoIncrement, //不使用自增id
            });

            // // 为每个表格复制索引结构
            // store.indexNames.forEach((indexName) => {
            //   const index = store.index(indexName);
            //   newStore.createIndex(indexName, index.keyPath, index.options);
            // });
          });
        },
      });

      console.log(`成功复制数据库结构: ${sourceDBName} -> ${targetDBName}`);
    } catch (error) {
      console.error('复制数据库结构时出错:', error);
    }
  };




  // 读取指定存储对象"表格"的数据
  const readTableData = async (TableName,index) => {
    try {
      const db = await openDB(DB_NAME, DB_VERSION);
      console.log(db, "db");
      const tx = db.transaction(TableName, 'readonly');
      const store = tx.objectStore(TableName);
      const items = await store.getAll();
      console.log(`${TableName}的数据:`, items);

      const newDB = await openDB(NEW_DB_NAME, NEW_DB_VERSION);
      const newtx = newDB.transaction(TableName, 'readwrite');
      const newstore = newtx.objectStore(TableName);

      let newindex = 0 ;
      // 插入数据到NEW_DB_NAME
      items.forEach(item => {
        // 去除item中的id
        const { id, ...Item } = item;  
        const newItem = { ...item, id: newindex }; // 设置新的 id，示例是按顺序设置（你可以自定义生成 id 的规则）
        newindex = newindex + 1
        newstore.put(newItem); // 使用 put 插入或更新数据
      });
      await tx.done; // 确保事务完成
      console.log(`数据成功插入到${NEW_DB_NAME}中的${TableName}表格`);

      return items;
    } catch (error) {
      console.error(`读取${TableName}数据时出错:`, error);
      return [];
    }
  };

  // 读取所有数据
  const readAllDBData = async () => {
    // 调用函数，复制数据库结构到NEW_DB_NAME
    copyDatabaseStructure(DB_NAME, NEW_DB_NAME, NEW_DB_VERSION);
    // 遍历原有数据库的表格
    try {
      const db = await openDB(DB_NAME, DB_VERSION);
      const tableNames = Array.from(db.objectStoreNames);  // 将DOMStringList转化为数组
      const allData = [];
      // 遍历所有表名
      for (const [index, tableName] of tableNames.entries()) {
        const items = await readTableData(tableName,index);// 遍历表格中的数据
        allData.push({ tableName, items });
        console.log(`第${index + 1}个`, `${tableName}的数据:`, items);  // 打印每个表的数据，并显示索引
      }
      setData(allData); // 设置读取的数据
    } catch (error) {
      console.error('读取数据时出错:', error);
    }
  };

  return (
    <div>
      <h1>数据库数据读取</h1>
      <button onClick={readAllDBData}>读取所有数据</button>
      <div>
        {data.length > 0 && (
          <div>
            <h2>读取的所有数据：</h2>
            <ul>
              {data.map((tableData, index) => (
                <li key={index}>
                  <h3>{tableData.tableName}</h3>
                  <pre>{JSON.stringify(tableData.items, null, 2)}</pre>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;