先不要管indexedDB的部分，这个模块我只想提供三个方法， 1、put(key, strValue) 2、get(key) 3、remove(key)

标签：indexedDB IndexedDB transaction const get request key event

明白了，如果这个模块只需要提供三个简单的方法 put(key, strValue)、get(key) 和 remove(key)，可以按照以下的方式实现：

代码实现：

import React, { useState, useEffect } from 'react';

// 提供三个方法用于对IndexedDB进行基本操作
const IndexedDB = () => {

  // put 方法：将数据存储到 IndexedDB 中
  const put = (key, strValue) => {
    const request = indexedDB.open('AdhocTabsStatus', 1);

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      // 创建对象存储区（如果不存在的话）
      if (!db.objectStoreNames.contains('tabs')) {
        db.createObjectStore('tabs', { keyPath: 'id' });
      }
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(['tabs'], 'readwrite');
      const store = transaction.objectStore('tabs');
      const requestPut = store.put({ id: key, value: strValue });

      requestPut.onsuccess = () => {
        console.log('数据存储成功');
      };

      requestPut.onerror = (event) => {
        console.error('存储数据失败:', event.target.error);
      };
    };

    request.onerror = (event) => {
      console.error('打开数据库失败:', event.target.error);
    };
  };

  // get 方法：从 IndexedDB 中读取数据
  const get = (key) => {
    const request = indexedDB.open('AdhocTabsStatus', 1);

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(['tabs'], 'readonly');
      const store = transaction.objectStore('tabs');
      const requestGet = store.get(key); // 使用传入的key读取数据

      requestGet.onsuccess = (event) => {
        if (event.target.result) {
          console.log('数据获取成功:', event.target.result);
          return event.target.result.value; // 返回存储的值
        } else {
          console.log('未找到该数据');
          return null;
        }
      };

      requestGet.onerror = (event) => {
        console.error('读取数据失败:', event.target.error);
      };
    };

    request.onerror = (event) => {
      console.error('打开数据库失败:', event.target.error);
    };
  };

  // remove 方法：从 IndexedDB 中删除数据
  const remove = (key) => {
    const request = indexedDB.open('AdhocTabsStatus', 1);

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(['tabs'], 'readwrite');
      const store = transaction.objectStore('tabs');
      const requestRemove = store.delete(key); // 使用传入的key删除数据

      requestRemove.onsuccess = () => {
        console.log('数据删除成功');
      };

      requestRemove.onerror = (event) => {
        console.error('删除数据失败:', event.target.error);
      };
    };

    request.onerror = (event) => {
      console.error('打开数据库失败:', event.target.error);
    };
  };

  // 这部分可以是UI或者不需要显示的部分
  return (
    <div>
      <h3>IndexedDB Methods</h3>
      {/* UI 代码部分可以根据需要自行添加 */}
    </div>
  );
};

export default IndexedDB;

代码说明：

1. put(key, strValue)：

使用 indexedDB.open() 打开数据库。
在 onupgradeneeded 中创建 tabs 存储区（如果不存在）。
通过 transaction.objectStore('tabs').put({ id: key, value: strValue }) 将数据存入 IndexedDB。
key 作为 id，并保存值 strValue。

2. get(key)：

使用 indexedDB.open() 打开数据库。
在 onsuccess 中读取存储在 tabs 存储区中的数据。
使用 store.get(key) 根据 key 获取值，如果找到了，返回对应的 value。

3. remove(key)：

使用 indexedDB.open() 打开数据库。
通过 store.delete(key) 根据 key 删除存储的数据。

使用这些方法：

您可以通过导入 IndexedDB 模块，在应用中的其他部分使用这三个方法。比如：

import IndexedDB from './IndexedDB';

const someFunction = () => {
  // 存储数据
  IndexedDB.put('user123', 'Some user data');

  // 获取数据
  const userData = IndexedDB.get('user123');
  console.log(userData);

  // 删除数据
  IndexedDB.remove('user123');
};

注意：

由于 IndexedDB 的操作是异步的，get 方法实际上是无法同步返回数据的，因为它是基于事件（如 onsuccess）的。所以，如果要同步获取数据，你需要使用 Promise 来处理异步操作，或者通过回调函数来处理。
put 和 remove 都是异步操作，因此也可以通过回调或 Promise 来处理操作完成后的反馈。

如果你需要将这些方法改成 Promise 风格，方便在调用时 await 获取结果，可以参考下面的修改版本：

Promise 风格的实现：

const IndexedDB = () => {

  const openDB = () => {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open('AdhocTabsStatus', 1);
      request.onsuccess = (event) => resolve(event.target.result);
      request.onerror = (event) => reject(event.target.error);
    });
  };

  const put = async (key, strValue) => {
    const db = await openDB();
    const transaction = db.transaction(['tabs'], 'readwrite');
    const store = transaction.objectStore('tabs');
    const request = store.put({ id: key, value: strValue });
    
    return new Promise((resolve, reject) => {
      request.onsuccess = () => resolve('数据存储成功');
      request.onerror = (event) => reject('存储数据失败');
    });
  };

  const get = async (key) => {
    const db = await openDB();
    const transaction = db.transaction(['tabs'], 'readonly');
    const store = transaction.objectStore('tabs');
    const request = store.get(key);
    
    return new Promise((resolve, reject) => {
      request.onsuccess = (event) => {
        if (event.target.result) {
          resolve(event.target.result.value);
        } else {
          reject('未找到该数据');
        }
      };
      request.onerror = (event) => reject('读取数据失败');
    });
  };

  const remove = async (key) => {
    const db = await openDB();
    const transaction = db.transaction(['tabs'], 'readwrite');
    const store = transaction.objectStore('tabs');
    const request = store.delete(key);

    return new Promise((resolve, reject) => {
      request.onsuccess = () => resolve('数据删除成功');
      request.onerror = (event) => reject('删除数据失败');
    });
  };

  return (
    <div>
      <h3>IndexedDB Methods</h3>
    </div>
  );
};

使用这个版本时，您可以像下面这样调用这些方法：

const someFunction = async () => {
  await IndexedDB.put('user123', 'Some user data');
  const data = await IndexedDB.get('user123');
  console.log(data);
  await IndexedDB.remove('user123');
};

这样，方法会返回 Promise，可以通过 async/await 或 then/catch 来处理。

标签：indexedDB,IndexedDB,transaction,const,get,request,key,event
From： https://www.cnblogs.com/Tifahfyf/p/18579707