在react中使用 indexDb的方法

更新時(shí)間：2024年11月28日 10:51:02 作者：怠惰小白程序員

在React中使用IndexedDB進(jìn)行前端離線存儲,可以存儲大量數(shù)據(jù),支持復(fù)雜的數(shù)據(jù)類型和高性能查詢,通過示例展示了如何創(chuàng)建數(shù)據(jù)庫、添加數(shù)據(jù)、查詢數(shù)據(jù)和構(gòu)建一個簡單的待辦事項(xiàng)應(yīng)用,感興趣的朋友跟隨小編一起看看吧

如何在react中使用 indexDb

下載依賴

 npm install localforage

接下來像使用 localstore一樣使用它

import React, { useEffect } from 'react';
import localForage from 'localforage';
const App = () => {
  useEffect(() => {
    // 保存數(shù)據(jù)
    async function storeData() {
      try {
        await localForage.setItem('user', { id: 1, name: 'John Doe' });
        // 讀取數(shù)據(jù)
        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;

擴(kuò)展：前端離線存儲能力：如何在 React 中巧妙運(yùn)用IndexedDB

前端離線存儲能力：如何在 React 中巧妙運(yùn)用IndexedDB

前言

當(dāng)我們開發(fā)復(fù)雜的Web應(yīng)用時(shí)，常常需要在客戶端存儲大量數(shù)據(jù)。你可能聽過 localStorage或者 sessionStorage，但它們在存儲空間和功能上都有限。而今天我們要聊的，是一個功能更強(qiáng)大的技術(shù)：IndexedDB。

IndexedDB 是什么

IndexedDB是一個運(yùn)行在瀏覽器中的非關(guān)系型數(shù)據(jù)庫。它讓你能夠存儲大量的數(shù)據(jù)，并具有高性能的查詢能力。不像localStorage只能存儲字符串，IndexedDB可以存儲各種類型的數(shù)據(jù)，比如文件、Blob，以及你可以想到的其他各種類型。

IndexedDB 的能力

存儲大數(shù)據(jù)量: 它可以存儲比 localStorage更多的數(shù)據(jù)，而且沒有固定的大小限制，往往是根據(jù)用戶磁盤大小的一定百分比。
復(fù)雜數(shù)據(jù)存儲: 能夠存儲更加復(fù)雜的數(shù)據(jù)類型。
查詢性能優(yōu)越: IndexedDB支持索引，你可以建立索引快速檢索數(shù)據(jù)，而不用遍歷整個數(shù)據(jù)庫。
離線應(yīng)用程序: 在用戶沒有網(wǎng)的時(shí)候，應(yīng)用還是可以訪問到之前存儲的數(shù)據(jù)。
事務(wù)支持: IndexedDB支持事務(wù)，你可以進(jìn)行復(fù)雜的數(shù)據(jù)操作，而且還有回滾的能力。
異步: 所有操作都是異步的，這也意味著它不會阻塞你的UI線程，用戶體驗(yàn)更好。

在 React 項(xiàng)目中使用 IndexedDB

好，現(xiàn)在我們知道了IndexedDB是個好東西，那如何在React中使用它呢？

這篇文章會介紹使用IndexedDB的兩種方式。

一、原生方式

我們來創(chuàng)建一個簡單的React hook來展示如何使用原生的IndexedDB API。

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];
};

這個Hook非?；A(chǔ)，它可以打開數(shù)據(jù)庫，并允許你向數(shù)據(jù)庫中添加數(shù)據(jù)。

二、使用localForage

現(xiàn)在讓我們看看如何使用 localForage——一個快速簡便的本地存儲庫，以更簡潔的方式使用IndexedDB。首先，你需要安裝 localForage：

npm install localforage

現(xiàn)在你可以用它來簡化IndexedDB的操作了：

import localForage from 'localforage';
localForage.setItem('somekey', 'somevalue')
    .then(() => {
        return localForage.getItem('somekey');
    })
    .then((value) => {
        // 這里是我們的數(shù)據(jù)
        console.log(value);
    })
    .catch((err) => {
        // 出錯了!
        console.error(err);
    });

localForage.setItem()和 localForage.getItem()都返回Promise，這讓它們可以很方便地與async/await一起使用。

import React, { useEffect } from 'react';
import localForage from 'localforage';
const App = () => {
  useEffect(() => {
    // 保存數(shù)據(jù)
    async function storeData() {
      try {
        await localForage.setItem('user', { id: 1, name: 'John Doe' });
        // 讀取數(shù)據(jù)
        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;

在這個例子中，我們創(chuàng)建了一個名為 App的React組件，在組件的 useEffect Hook中，我們寫了一個名為 storeData的 async函數(shù)來異步交互IndexedDB。我們先使用 setItem方法向IndexedDB中存入數(shù)據(jù)，然后用 getItem讀取這些數(shù)據(jù)，并把它們打印出來。

localForage支持回調(diào)和 Promise形式的API，這使得它非常容易在現(xiàn)代JavaScript或TypeScript應(yīng)用程序中使用。它也會自動根據(jù)瀏覽器的支持情況后退到使用WebSQL或localStorage，這為你的應(yīng)用程序提供了更好的兼容性。

實(shí)戰(zhàn)

接下來讓我們試著構(gòu)建一個小型的待辦事項(xiàng)應(yīng)用，這個應(yīng)用將會使用React和IndexedDB原生API來存儲數(shù)據(jù)。

第一步：創(chuàng)建一個IndexedDB數(shù)據(jù)庫和對象存儲

創(chuàng)建React應(yīng)用的入口文件 App.js并編寫以下內(nèi)容：

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 });
    };
  }, []);
  // ...后續(xù)內(nèi)容將會增加到這里...
  return (
    <div>
      <h1>Todo App with IndexedDB</h1>
      {/* 待辦事項(xiàng)表單和列表展示將會在這里添加 */}
    </div>
  );
}
export default App;

第二步：實(shí)現(xiàn)添加和顯示待辦事項(xiàng)的功能

現(xiàn)在，我們在組件內(nèi)實(shí)現(xiàn)添加新的待辦事項(xiàng)到IndexedDB中和從數(shù)據(jù)庫中讀取待辦事項(xiàng)列表的功能。

更新 App.js，添加以下內(nèi)容：

// ...之前的代碼...
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(); // 重新加載待辦事項(xiàng)列表
  };
}
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);
    }
  };
}
// 確保數(shù)據(jù)被加載
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>
);
// ...之前的代碼...

以上代碼完成了以下功能：

通過 useEffect鉤子創(chuàng)建或打開一個名為 todoDB的IndexedDB數(shù)據(jù)庫，如果不存在，就會創(chuàng)建一個名叫 todos的對象存儲。
使用 addTodo函數(shù)來將新任務(wù)添加進(jìn)數(shù)據(jù)庫。
使用 loadTodos函數(shù)查詢IndexedDB中的所有待辦事項(xiàng)，并將它們設(shè)置到組件狀態(tài)中，以便可以在React組件中顯示這些待辦事項(xiàng)。
提供了一個簡單的表單，可以輸入新的待辦事項(xiàng)并添加到列表中。

此時(shí)，我們已經(jīng)擁有了一個可以使用IndexedDB存儲數(shù)據(jù)的基本的待辦事項(xiàng)應(yīng)用。當(dāng)然，實(shí)際應(yīng)用中還需要很多增強(qiáng)，比如錯誤處理、用戶輸入驗(yàn)證以及待辦事項(xiàng)的刪除和編輯功能等。但這個例子足以說明如何在React中直接使用IndexedDB，以及開發(fā)可以持久存儲用戶數(shù)據(jù)的Web應(yīng)用程序。

結(jié)論

IndexedDB的確是一種功能強(qiáng)大的工具，尤其適合那些需要存儲和操作大量和/或復(fù)雜數(shù)據(jù)的Web應(yīng)用程序。不過，記住它的API并不像localStorage那么簡單直接，所以在大多數(shù)情況下，使用 localForage等庫可以大大簡化這個過程。

到此這篇關(guān)于如何在react中使用 indexDb的文章就介紹到這了,更多相關(guān)react使用 indexDb內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: