這篇文章主要講解了“如何在React應(yīng)用中使用Dexie.js進(jìn)行離線數(shù)據(jù)存儲”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何在React應(yīng)用中使用Dexie.js進(jìn)行離線數(shù)據(jù)存儲”吧！

創(chuàng)新互聯(lián)專注于榕城網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供榕城營銷型網(wǎng)站建設(shè)，榕城網(wǎng)站制作、榕城網(wǎng)頁設(shè)計、榕城網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造榕城網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供榕城網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

離線存儲應(yīng)用程序數(shù)據(jù)已成為現(xiàn)代 Web 開發(fā)中的必要條件。內(nèi)置的瀏覽器 localStorage  可以用作簡單輕量數(shù)據(jù)的數(shù)據(jù)存儲，但是在結(jié)構(gòu)化數(shù)據(jù)或存儲大量數(shù)據(jù)方面卻不足。

最重要的是，我們只能將字符串?dāng)?shù)據(jù)存儲在受 XSS 攻擊的 localStorage 中，并且它沒有提供很多查詢數(shù)據(jù)的功能。

這就是 IndexedDB 的亮點。使用  IndexedDB，我們可以在瀏覽器中創(chuàng)建結(jié)構(gòu)化的數(shù)據(jù)庫，將幾乎所有內(nèi)容存儲在這些數(shù)據(jù)庫中，并對數(shù)據(jù)執(zhí)行各種類型的查詢。

在本文中，我們將了解 IndexedDB 的全部含義，以及如何使用 Dexie.js(用于 IndexedDB 的簡約包裝)處理 Web  應(yīng)用程序中的離線數(shù)據(jù)存儲。

IndexedDB 如何工作

IndexedDB 是用于瀏覽器的內(nèi)置非關(guān)系數(shù)據(jù)庫。它使開發(fā)人員能夠?qū)?shù)據(jù)持久存儲在瀏覽器中，即使在脫機(jī)時也可以無縫使用 Web 應(yīng)用程序。使用  IndexedDB 時，您會經(jīng)?？吹絻蓚€術(shù)語：數(shù)據(jù)庫存儲和對象存儲。讓我們在下面進(jìn)行探討。

使用 IndexedDB 創(chuàng)建數(shù)據(jù)庫

IndexedDB 數(shù)據(jù)庫對每個 Web 應(yīng)用程序來說都是唯一的。這意味著一個應(yīng)用程序只能從與自己運行在同一域或子域的 IndexedDB  數(shù)據(jù)庫中訪問數(shù)據(jù)。數(shù)據(jù)庫是容納對象存儲的地方，而對象存儲又包含存儲的數(shù)據(jù)。要使用 IndexedDB 數(shù)據(jù)庫，我們需要打開(或連接到)它們：

const initializeDb = indexedDB.open(   "name_of_database",   version );

indexedDb.open() 方法中的 name_of_database 參數(shù)將用作正在創(chuàng)建的數(shù)據(jù)庫的名稱，而 version  參數(shù)是一個代表數(shù)據(jù)庫版本的數(shù)字。

在 IndexedDB 中，我們使用對象存儲來構(gòu)建數(shù)據(jù)庫的結(jié)構(gòu)，并且每當(dāng)要更新數(shù)據(jù)庫結(jié)構(gòu)時，都需要將版本升級到更高的值。這意味著，如果我們從版本 1  開始，則下次要更新數(shù)據(jù)庫的結(jié)構(gòu)時，我們需要將 indexedDb.open() 方法中的版本更改為 2 或更高版本。

使用 IndexedDB 創(chuàng)建對象存儲

對象存儲類似于關(guān)系數(shù)據(jù)庫(如 PostgreSQL)中的表和文檔數(shù)據(jù)庫(如 MongoDB)中的集合。要在 IndexedDB  中創(chuàng)建對象存儲，我們需要從之前聲明的 initializeDb 變量中調(diào)用 onupgradeneeded() 方法：

initializeDb.onupgradeneeded = () => {   const database = initializeDb.result;   database.createObjectStore("name_of_object_store", {     autoIncrement: true,   }); };

在上面的代碼塊中，我們從 initializeDb.result 屬性獲取數(shù)據(jù)庫，然后使用其 createObjectStore()  方法創(chuàng)建對象存儲。第二個參數(shù) {autoIncrement：true} 告訴 IndexedDB 自動提供/增加對象存儲中項目的 ID。

我省略了諸如事務(wù)和游標(biāo)之類的其他術(shù)語，因為使用低級 IndexedDB API 需要進(jìn)行大量工作。這就是為什么我們需要 Dexie.js，它是  IndexedDB 的簡約包裝。讓我們看看 Dexie 如何簡化創(chuàng)建數(shù)據(jù)庫，對象存儲，存儲數(shù)據(jù)以及從數(shù)據(jù)庫查詢數(shù)據(jù)的整個過程。

使用 Dexie 離線存儲數(shù)據(jù)

使用 Dexie，創(chuàng)建 IndexedDB 數(shù)據(jù)庫和對象存儲非常容易：

const db = new Dexie("exampleDatabase"); db.version(1).stores({   name_of_object_store: "++id, name, price",   name_of_another_object_store: "++id, title", });

在上面的代碼塊中，我們創(chuàng)建了一個名為 exampleDatabase 的新數(shù)據(jù)庫，并將其作為值分配給 db 變量。我們使用  db.version(version_number).stores()  方法為數(shù)據(jù)庫創(chuàng)建對象存儲。每個對象存儲的值代表了它的結(jié)構(gòu)。例如，當(dāng)在第一個對象存儲中存儲數(shù)據(jù)時，我們需要提供一個具有屬性 name 和 price  的對象。++id 選項的作用就像我們在創(chuàng)建對象存儲區(qū)時使用的 {autoIncrement：true} 參數(shù)一樣。

請注意，在我們的應(yīng)用程序中使用 dexie 包之前，我們需要安裝并導(dǎo)入它。當(dāng)我們開始構(gòu)建我們的演示項目時，我們將看到如何做到這一點。

我們將要建立的

對于我們的演示項目，我們將使用 Dexie.js 和 React  構(gòu)建一個市場列表應(yīng)用程序。我們的用戶將能夠在市場列表中添加他們打算購買的商品，刪除這些商品或?qū)⑵錁?biāo)記為已購買。

我們將看到如何使用 Dexie useLiveQuery hook 來監(jiān)視 IndexedDB 數(shù)據(jù)庫中的更改以及在數(shù)據(jù)庫更新時重新呈現(xiàn) React  組件。這是我們的應(yīng)用程序的外觀：

設(shè)置我們的應(yīng)用

首先，我們將使用為應(yīng)用程序的結(jié)構(gòu)和設(shè)計創(chuàng)建的 GitHub 模板。這里有一個模板的鏈接。點擊**Use this  template(使用此模板)**按鈕，就會用現(xiàn)有的模板為你創(chuàng)建一個新的資源庫，然后你就可以克隆和使用這個模板。

或者，在計算機(jī)上安裝了GitHub CLI的情況下，您可以運行以下命令從市場列表 GitHub 模板創(chuàng)建名為 market-list-app  的存儲庫：

gh repo create market-list-app --template ebenezerdon/market-list-template

完成此操作后，您可以繼續(xù)在代碼編輯器中克隆并打開您的新應(yīng)用程序。使用終端在應(yīng)用程序目錄中運行以下命令應(yīng)安裝 npm 依賴項并啟動新應(yīng)用程序：

npm install && npm start

導(dǎo)航到成功消息中的本地 URL(通常為http://localhost:3000)時，您應(yīng)該能夠看到新的React應(yīng)用程序。您的新應(yīng)用應(yīng)如下所示：

當(dāng)您打開 ./src/App.js 文件時，您會注意到我們的應(yīng)用程序組件僅包含市場列表應(yīng)用程序的 JSX 代碼。我們正在使用Materialize  框架中的類進(jìn)行樣式設(shè)置，并將其 cdn 鏈接包含在 ./public/index.html 文件中。接下來，我們將看到如何使用 Dexie  創(chuàng)建和管理數(shù)據(jù)。

用 Dexie 創(chuàng)建我們的數(shù)據(jù)庫

要在我們的 React 應(yīng)用程序中使用 Dexie.js 進(jìn)行離線存儲，我們將從在終端中運行以下命令開始，以安裝 dexie 和  dexie-react-hooks 軟件包：

npm i -s dexie dexie-react-hooks

我們將使用 dexie-react-hooks 包中的 useLiveQuery hook 來監(jiān)視更改，并在對 IndexedDB  數(shù)據(jù)庫進(jìn)行更新時重新渲染我們的 React 組件。

讓我們將以下導(dǎo)入語句添加到我們的 ./src/App.js 文件中。這將導(dǎo)入 Dexie 和 useLiveQuery hook：

import Dexie from "dexie"; import { useLiveQuery } from "dexie-react-hooks";

接下來，我們將創(chuàng)建一個名為 MarketList 的新數(shù)據(jù)庫，然后聲明我們的對象存儲 items：

const db = new Dexie("MarketList"); db.version(1).stores({   items: "++id,name,price,itemHasBeenPurchased", });

我們的 items 對象存儲將期待一個具有屬性name、price和 itemHasBeenPurchased 的對象，而 id 將由 Dexie  提供。在將新數(shù)據(jù)添加到對象存儲中時，我們將為 itemHasBeenPurchased 屬性使用默認(rèn)布爾值  false，然后在我們從市場清單中購買商品時將其更新為 true。

Dexie React hook

讓我們創(chuàng)建一個變量來存儲我們所有的項目。我們將使用 useLiveQuery 鉤子從 items 對象存儲中獲取數(shù)據(jù)，并觀察其中的變化，這樣當(dāng) items  對象存儲有更新時，我們的 allItems 變量將被更新，我們的組件將用新的數(shù)據(jù)重新渲染。我們將在 App 組件內(nèi)部進(jìn)行：

const App = () => {   const allItems = useLiveQuery(() => db.items.toArray(), []);   if (!allItems) return null   ... }

在上面的代碼塊中，我們創(chuàng)建了一個名為 allItems 的變量，并將 useLiveQuery 鉤子作為其值。useLiveQuery 鉤子的語法類似于  React 的 useEffect 鉤子，它期望一個函數(shù)及其依賴項數(shù)組作為參數(shù)。我們的函數(shù)參數(shù)返回數(shù)據(jù)庫查詢。

在這里，我們以數(shù)組格式獲取 items 對象存儲中的所有數(shù)據(jù)。在下一行中，我們使用一個條件來告訴我們的組件，如果 allItems 變量是  undefined，則意味著查詢?nèi)栽诩虞d中。

將 items 添加到我們的數(shù)據(jù)庫

仍在 App 組件中，讓我們創(chuàng)建一個名為 addItemToDb 的函數(shù)，我們將使用該函數(shù)向數(shù)據(jù)庫中添加項目。每當(dāng)我們點擊“ADD  ITEM(添加項目)”按鈕時，我們都會調(diào)用此函數(shù)。請記住，每次更新數(shù)據(jù)庫時，我們的組件都會重新渲染。

... const addItemToDb = async event => {     event.preventDefault()     const name = document.querySelector('.item-name').value     const price = document.querySelector('.item-price').value     await db.items.add({       name,       price: Number(price),       itemHasBeenPurchased: false     })   } ...

在 addItemToDb 函數(shù)中，我們從表單輸入字段中獲取商品名稱和價格值，然后使用 db.[name_of_object_store].add  方法將新商品數(shù)據(jù)添加到商品對象存儲中。我們還將 itemHasBeenPurchased 屬性的默認(rèn)值設(shè)置為 false。

從我們的數(shù)據(jù)庫中刪除 items

現(xiàn)在我們有了 addItemToDb 函數(shù)，讓我們創(chuàng)建一個名為 removeItemFromDb 的函數(shù)以從我們的商品對象存儲中刪除數(shù)據(jù)：

... const removeItemFromDb = async id => {   await db.items.delete(id) } ...

更新我們數(shù)據(jù)庫中的項目

接下來，我們將創(chuàng)建一個名為 markAsPurchased 的函數(shù)，用于將商品標(biāo)記為已購買。我們的函數(shù)在調(diào)用時，會將物品的主鍵作為第一個參數(shù)——在本例中是  id，它將使用這個主鍵來查詢我們想要標(biāo)記為購買的物品的數(shù)據(jù)庫。取得商品后，它將其 markAsPurchased 屬性更新為 true：

... const markAsPurchased = async (id, event) => {   if (event.target.checked) {     await db.items.update(id, {itemHasBeenPurchased: true})   }   else {     await db.items.update(id, {itemHasBeenPurchased: false})   } } ...

在 markAsPurchased 函數(shù)中，我們使用 event  參數(shù)來獲取用戶單擊的特定輸入元素。如果選中其值，我們將itemHasBeenPurchased 屬性更新為 true，否則更新為  false。db.[name_of_object_store] .update() 方法期望該項目的主鍵作為其第一個參數(shù)，而新對象數(shù)據(jù)作為其第二個參數(shù)。

下面是我們的 App 組件在這個階段應(yīng)該是什么樣子。

... const App = () => {   const allItems = useLiveQuery(() => db.items.toArray(), []);   if (!allItems) return null    const addItemToDb = async event => {     event.preventDefault()     const name = document.querySelector('.item-name').value     const price = document.querySelector('.item-price').value     await db.items.add({ name, price, itemHasBeenPurchased: false })   }    const removeItemFromDb = async id => {     await db.items.delete(id)   }    const markAsPurchased = async (id, event) => {     if (event.target.checked) {       await db.items.update(id, {itemHasBeenPurchased: true})     }     else {       await db.items.update(id, {itemHasBeenPurchased: false})     }   }   ... }

現(xiàn)在，我們創(chuàng)建一個名為 itemData 的變量，以容納我們所有商品數(shù)據(jù)的 JSX 代碼：

... const itemData = allItems.map(({ id, name, price, itemHasBeenPurchased }) => (                         markAsPurchased(id, event)}         />         {name}            
     ${price}
      removeItemFromDb(id)} className="col s2 material-icons delete-button">       delete