在react中使用 indexDb的方法

 npm install localforage

import React, { useEffect } from 'react';
import localForage from 'localforage';
const App = () => {
  useEffect(() => {
    // 保存数据
    async function storeData() {
      try {
        await localForage.setItem('user', { id: 1, name: 'John Doe' });
        // 读取数据
        const userData = await localForage.getItem('user');
        console.log(userData);
      } catch (err) {
        // 错误处理
        console.error(err);
      }
    }
    storeData();
  }, []);
  return (
    <div>
      <h1>Welcome to IndexedDB with localForage</h1>
    </div>
  );
};
export default App;

import { useEffect, useState } from 'react';
const useIndexedDB = (dbName, storeName) => {
  const [db, setDb] = useState(null);
  useEffect(() => {
    const request = indexedDB.open(dbName, 1);
    request.onerror = (event) => {
      console.error('Database error:', event.target.errorCode);
    };
    request.onsuccess = (event) => {
      setDb(event.target.result);
    };
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      db.createObjectStore(storeName, { keyPath: 'id', autoIncrement: true });
    };
  }, [dbName, storeName]);
  const addData = (data) => {
    const transaction = db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);
    store.add(data);
  };
  return [db, addData];
};

npm install localforage

import localForage from 'localforage';
localForage.setItem('somekey', 'somevalue')
    .then(() => {
        return localForage.getItem('somekey');
    })
    .then((value) => {
        // 这里是我们的数据
        console.log(value);
    })
    .catch((err) => {
        // 出错了!
        console.error(err);
    });

import React, { useEffect } from 'react';
import localForage from 'localforage';
const App = () => {
  useEffect(() => {
    // 保存数据
    async function storeData() {
      try {
        await localForage.setItem('user', { id: 1, name: 'John Doe' });
        // 读取数据
        const userData = await localForage.getItem('user');
        console.log(userData);
        // => {id: 1, name: "John Doe"}
      } catch (err) {
        // 错误处理
        console.error(err);
      }
    }
    storeData();
  }, []);
  return (
    <div>
      <h1>Welcome to IndexedDB with localForage</h1>
    </div>
  );
};
export default App;

import React, { useState, useEffect } from 'react';
function App() {
  const [db, setDb] = useState(null);
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState('');
  useEffect(() => {
    let request = indexedDB.open('todoDB', 1);
    request.onerror = (e) => {
      console.log('Error opening db', e);
    };
    request.onsuccess = (e) => {
      setDb(e.target.result);
    };
    request.onupgradeneeded = (e) => {
      let db = e.target.result;
      let store = db.createObjectStore('todos', { keyPath: 'id', autoIncrement: true });
      store.createIndex('task', 'task', { unique: false });
    };
  }, []);
  // ...后续内容将会增加到这里...
  return (
    <div>
      <h1>Todo App with IndexedDB</h1>
      {/* 待办事项表单和列表展示将会在这里添加 */}
    </div>
  );
}
export default App;

// ...之前的代码...
function addTodo() {
  const transaction = db.transaction(['todos'], 'readwrite');
  const store = transaction.objectStore('todos');
  let request = store.add({ task });
  request.onsuccess = () => {
    console.log('Task added');
    setTask(''); // 清空输入
    loadTodos(); // 重新加载待办事项列表
  };
}
function loadTodos() {
  let transaction = db.transaction(['todos'], 'readonly');
  let store = transaction.objectStore('todos');
  let request = store.openCursor();
  let todos = [];
  request.onsuccess = (e) => {
    let cursor = e.target.result;
    if (cursor) {
      todos.push(cursor.value);
      cursor.continue();
    } else {
      setTodos(todos);
    }
  };
}
// 确保数据被加载
useEffect(() => {
  if (db) {
    loadTodos();
  }
}, [db]);
// ...之前的代码...
return (
  <div>
    {/* 其他代码 */}
    <input type="text" value={task} onChange={(e) => setTask(e.target.value)} />
    <button onClick={addTodo}>Add Task</button>
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.task}</li>
      ))}
    </ul>
  </div>
);
// ...之前的代码...