在react中使用 indexDb的方法
如何在react中使用 indexDb
下載依賴
npm install localforage
接下來像使用 localstore一樣使用它
import React, { useEffect } from 'react';
import localForage from 'localforage';
const App = () => {
useEffect(() => {
// 保存數(shù)據
async function storeData() {
try {
await localForage.setItem('user', { id: 1, name: 'John Doe' });
// 讀取數(shù)據
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;擴展：前端離線存儲能力：如何在 React 中巧妙運用IndexedDB
前端離線存儲能力：如何在 React 中巧妙運用IndexedDB
前言
當我們開發(fā)復雜的Web應用時，常常需要在客戶端存儲大量數(shù)據。你可能聽過 localStorage或者 sessionStorage，但它們在存儲空間和功能上都有限。而今天我們要聊的，是一個功能更強大的技術：IndexedDB。
IndexedDB 是什么
IndexedDB是一個運行在瀏覽器中的非關系型數(shù)據庫。它讓你能夠存儲大量的數(shù)據，并具有高性能的查詢能力。不像localStorage只能存儲字符串，IndexedDB可以存儲各種類型的數(shù)據，比如文件、Blob，以及你可以想到的其他各種類型。
IndexedDB 的能力
- 存儲大數(shù)據量: 它可以存儲比
localStorage更多的數(shù)據，而且沒有固定的大小限制，往往是根據用戶磁盤大小的一定百分比。 - 復雜數(shù)據存儲: 能夠存儲更加復雜的數(shù)據類型。
- 查詢性能優(yōu)越: IndexedDB支持索引，你可以建立索引快速檢索數(shù)據，而不用遍歷整個數(shù)據庫。
- 離線應用程序: 在用戶沒有網的時候，應用還是可以訪問到之前存儲的數(shù)據。
- 事務支持: IndexedDB支持事務，你可以進行復雜的數(shù)據操作，而且還有回滾的能力。
- 異步: 所有操作都是異步的，這也意味著它不會阻塞你的UI線程，用戶體驗更好。
在 React 項目中使用 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，它可以打開數(shù)據庫，并允許你向數(shù)據庫中添加數(shù)據。
二、使用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ù)據
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ù)據
async function storeData() {
try {
await localForage.setItem('user', { id: 1, name: 'John Doe' });
// 讀取數(shù)據
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ù)據，然后用 getItem讀取這些數(shù)據，并把它們打印出來。
localForage支持回調和 Promise形式的API，這使得它非常容易在現(xiàn)代JavaScript或TypeScript應用程序中使用。它也會自動根據瀏覽器的支持情況后退到使用WebSQL或localStorage，這為你的應用程序提供了更好的兼容性。
實戰(zhàn)
接下來讓我們試著構建一個小型的待辦事項應用，這個應用將會使用React和IndexedDB原生API來存儲數(shù)據。
第一步：創(chuàng)建一個IndexedDB數(shù)據庫和對象存儲
創(chuàng)建React應用的入口文件 App.js并編寫以下內容：
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ù)內容將會增加到這里...
return (
<div>
<h1>Todo App with IndexedDB</h1>
{/* 待辦事項表單和列表展示將會在這里添加 */}
</div>
);
}
export default App;第二步：實現(xiàn)添加和顯示待辦事項的功能
現(xiàn)在，我們在組件內實現(xiàn)添加新的待辦事項到IndexedDB中和從數(shù)據庫中讀取待辦事項列表的功能。
更新 App.js，添加以下內容：
// ...之前的代碼...
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);
}
};
}
// 確保數(shù)據被加載
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ù)據庫，如果不存在，就會創(chuàng)建一個名叫todos的對象存儲。 - 使用
addTodo函數(shù)來將新任務添加進數(shù)據庫。 - 使用
loadTodos函數(shù)查詢IndexedDB中的所有待辦事項，并將它們設置到組件狀態(tài)中，以便可以在React組件中顯示這些待辦事項。 - 提供了一個簡單的表單，可以輸入新的待辦事項并添加到列表中。
此時，我們已經擁有了一個可以使用IndexedDB存儲數(shù)據的基本的待辦事項應用。當然，實際應用中還需要很多增強，比如錯誤處理、用戶輸入驗證以及待辦事項的刪除和編輯功能等。但這個例子足以說明如何在React中直接使用IndexedDB，以及開發(fā)可以持久存儲用戶數(shù)據的Web應用程序。
結論
IndexedDB的確是一種功能強大的工具，尤其適合那些需要存儲和操作大量和/或復雜數(shù)據的Web應用程序。不過，記住它的API并不像localStorage那么簡單直接，所以在大多數(shù)情況下，使用 localForage等庫可以大大簡化這個過程。
到此這篇關于如何在react中使用 indexDb的文章就介紹到這了,更多相關react使用 indexDb內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React項目通常都有很多的URL需要管理，最常使用的解決方案就是React Router了，本篇文章主要介紹了React路由管理之React Router總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家介紹了ahooks解決用戶多次提交的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了react中使用useEffect及踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文通過代碼給大家介紹了使用react-color實現(xiàn)前端取色器的方法，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11
本篇文章主要介紹了詳解React Native網絡請求fetch簡單封裝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
ReactJs實現(xiàn)樹形結構的數(shù)據顯示的組件的示例
本篇文章主要介紹了ReactJs實現(xiàn)樹形結構的數(shù)據顯示的組件的示例，非常具有實用價值，需要的朋友可以參考下2017-08-08
React?Native?是Facebook在React.js?Conf2015推出的開源框架,使用React和應用平臺的原生功能來構建Android和iOS應用,這篇文章主要介紹了React?Native性能優(yōu)化紅寶書,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了React ref的使用詳解，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下2021-04-04
React-redux?中useSelector使用源碼分析
在一個 action 被分發(fā)(dispatch) 后，useSelector() 默認對 select 函數(shù)的返回值進行引用比較 ===，并且僅在返回值改變時觸發(fā)重渲染，，這篇文章主要介紹了React-redux?中useSelector使用,需要的朋友可以參考下2023-10-10
隨著React、Vue等支持組件化的MVVM前端框架越來越流行，在js中直接編寫css的技術方案也越來越被大家所接受。為什么前端開發(fā)者們更青睞于這些css-in-js的方案呢，下面帶你了解它2022-09-09