nodejs35: react中的IndexedDB 数据导出(JSON)与导入

导出数据到json

• 导出的json格式:

{"Table1":[
			{"Name":"AAA","id":"001"},
			{"Name":"BBB","id":"002"},
			{"Name":"CCC","id":"003"},
		],
"Table2":[
			{"Name":"DDD","id":"004"},
			{"Name":"EEE","id":"005"},
			{"Name":"FFF","id":"006"},
		],
}

• 代码

  // 读取指定存储对象"表格"的数据
  const readTableData = async (TableName,index) => {
    try {
      const db = await openDB(DB_NAME, DB_VERSION);
      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 = {};
      // 遍历所有表名
      let ProvienceIndex = 0
      for (const [index, tableName] of tableNames.entries()) {
        ProvienceIndex = ProvienceIndex + 1;
        const items = await readTableData(tableName,ProvienceIndex);// 遍历表格中的数据
        allData[tableName] = items;
        console.log(`第${index + 1}个`, `${tableName}的数据:`, items);  // 打印每个表的数据，并显示索引
      }
      const jsonData = JSON.stringify(allData);
      // 保存jsonData到文件
      const blob = new Blob([jsonData], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'allData.json';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      console.log('导出的 JSON 数据:', jsonData);
    } catch (error) {
      console.error('读取数据时出错:', error);
    }
  };

导入JSON数据

import { useState, useEffect } from 'react';
import { openDB } from 'idb';
import './App.css';

function App() {
  const [data, setData] = useState(null);
  const DB_NAME = 'NewDB';
  const DB_VERSION = 3;

  // 初始化数据库
  const initDB = async () => {
    const db = await openDB(DB_NAME, DB_VERSION, {
      upgrade(db) {
        // 获取所有省份并为每个省份创建一个对象仓库
        for (const key in data) {
          if (data.hasOwnProperty(key)) {
            if (!db.objectStoreNames.contains(key)) {
              db.createObjectStore(key, { keyPath: 'id' });
            }
          }
        }
      },
    });
    return db;
  };

  // 将数据存储到IndexedDB
  const storeData = async (jsonData) => {
    try {
      const db = await initDB();
      // 存储每个省份的数据
      for (const [tname, items] of Object.entries(jsonData)) {
        const tx = db.transaction(tname, 'readwrite');
        const store = tx.objectStore(tname);
        // 清除现有数据
        await store.clear();
        // 存储新数据
        for (const item of items) {
          await store.add(item);
        }
        await tx.done;
        console.log(`${tname}的数据已存储`);
      }
      console.log('所有数据已成功存储到IndexedDB');
    } catch (error) {
      console.error('存储数据时出错:', error);
    }
  };

  useEffect(() => {
    // 读取JSON文件
    fetch('/allData.json')
      .then(response => response.json())
      .then(jsonData => {
        setData(jsonData);
        storeData(jsonData);
        for (const key in jsonData) {
          if (jsonData.hasOwnProperty(key)) {
            console.log(key ,"---",jsonData[key]);
          }
        }
      })
      .catch(error => {
        console.error('读取JSON文件出错:', error);
      });
  }, []);


  return (
    <div className="App">
      <header className="App-header">
        {data ? (
          <div>
            <h2>JSON数据内容：</h2>
            <pre>{JSON.stringify(data, null, 2)}</pre>
          </div>
        ) : (
          <p>正在加载数据...</p>
        )}
      </header>
    </div>
  );
}

export default App;