共計 3192 個字符，預計需要花費 8 分鐘才能閱讀完成。
這篇文章主要講解了“怎么使用 IndexedDB”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著丸趣 TV 小編的思路慢慢深入，一起來研究和學習“怎么使用 IndexedDB”吧！
深入研究 IndexedDB API 及其在實踐中的用法。
你是否聽說過瀏覽器上的 NoSQL 數據庫?
IndexedDB 是大型 NoSQL 存儲系統。它使你幾乎可以將任何內容存儲在用戶的瀏覽器中。除了通常的搜索，獲取和放置操作外，IndexedDB 還支持事務。
你可以在下面找到 IndexedDB 的示例。
在本文中，我們將重點介紹以下內容。
為什么我們需要 IndexedDB?
我們如何在我們的應用程序中使用 IndexedDB?
IndexedDB 的功能
IndexedDB 的局限性
IndexedDB 是否適合你的應用程序?
為什么我們需要 IndexedDB?
IndexedDB 被認為比 localStorage 更強大!
你知道背后的原因嗎? 讓我們找出答案。
可以存儲比 localStorage 大得多的數據量
沒有像 localStorage 這樣的特殊限制(介于 2.5MB 和 10MB 之間)。最大限制取決于瀏覽器和磁盤空間。例如，基于 Chrome 和 Chromium 的瀏覽器最多允許 80% 的磁盤空間。如果你有 100GB，則 IndexedDB 最多可以使用 80GB 的空間，單個 origin 最多可以使用 60GB。Firefox 允許每個 origin 最多 2GB，而 Safari 允許每個來源最多 1GB。
可以存儲基于 {key: value} 對的任何類型的值
存儲不同數據類型的靈活性更高。這不僅意味著字符串，而且還意味著二進制數據(ArrayBuffer 對象，Blob 對象等)。它使用對象存儲在內部保存數據。
提供查找界面
這在其他瀏覽器存儲選項 (例如 localStorage 和 sessionStorage) 中不可用。
對于不需要持續互聯網連接的 Web 應用程序很有用
IndexedDB 對于聯機和脫機工作的應用程序都非常有用，例如，它可以用于漸進式 Web 應用程序 (PWA) 中的客戶端存儲。
應用狀態可以存儲
通過為經常使用的用戶存儲應用程序狀態，可以大大提高應用程序的性能。稍后，應用程序可以與后端服務器同步，并通過延遲加載來更新應用程序。
我們來看看 IndexedDB 的結構，它可以存儲多個數據庫。
IndexedDB 的結構
我們如何在我們的應用程序中使用 IndexedDB?
在以下部分中，我們將研究如何使用 IndexedDB 引導應用程序。
1. 使用“window.indexedDB”打開數據庫連接
const openingRequest = indexedDB.open(UserDB , 1);在這里 UserDB 是數據庫名稱，1 是數據庫的版本。這將返回一個對象，該對象是 IDBOpenDBRequest 接口的實例。
2. 創建對象存儲
打開數據庫連接后，將觸發 onupgradeneeded 事件，可用于創建對象存儲。
// 創建 UserDetails 對象存儲庫和索引 request.onupgradeneeded = (event) = { let db = event.target.result; // 創建 UserDetails 對象存儲 // 具有自動遞增 ID let store = db.createObjectStore( UserDetails , { autoIncrement: true }); // 在 NIC 屬性上創建索引 let index = store.createIndex(nic , nic , { unique: true }); };3. 將數據插入對象存儲
一旦打開了與數據庫的連接，就可以在 onsuccess 事件處理程序中管理數據。插入數據發生在 4 個步驟中。
function insertUser(db, user) { // 創建一個新事物 const txn = db.transaction( User , readwrite // 獲取 UserDetails 對象存儲 const store = txn.objectStore( UserDetails // 插入新記錄 let query = store.put(user); // 處理成功用例 query.onsuccess = function (event) { console.log(event); }; // 處理失敗用例 query.onerror = function (event) { console.log(event.target.errorCode); } // 事務完成后關閉數據庫 txn.oncomplete = function () { db.close(); }; }一旦創建了插入函數，請求的 onsuccess 事件處理程序就可以用來插入更多的記錄。
request.onsuccess = (event) = { const db = event.target.result; insertUser(db, { email: john.doe@outlook.com , firstName: John , lastName: Doe , }); insertUser(db, { email: ann.doe@gmail.com , firstName: Ann , lastName: Doe }); };在 IndexedDB 上可以執行許多操作，其中一些如下：
通過 key 從對象存儲中讀取 / 搜索數據
按 index 從對象存儲中讀取 / 搜索數據
更新記錄數據
刪除記錄
從數據庫的先前版本等進行遷移
IndexedDB 的功能
IndexedDB 提供了許多特殊的功能，這是其他瀏覽器存儲無法實現的，下面簡要說明一些功能。
具有異步 API
這使執行昂貴的操作而不會阻塞 UI 線程，并為用戶提供了更好的體驗。
支持事務以確保可靠性
如果一個步驟失敗，則事務將被取消，數據庫將回滾到先前的狀態。
支持版本控制
你可以在創建數據庫時對其進行版本控制，并在需要時對其進行升級。在 IndexedDB 中也可以從舊版本遷移到新版本。
私有域
數據庫是一個域的私有數據庫，因此任何其他網站都不能訪問其他網站的 IndexedDB 存儲。這也就是所謂的同源策略。
IndexedDB 的局限性
到目前為止，IndexedDB 似乎很有希望用于客戶端存儲。然而，有一些值得注意的限制。
即使有現代瀏覽器的支持，但 IE 等瀏覽器并沒有完全支持。
Firefox 在私人瀏覽模式下完全禁用 IndexedDB – 這可能導致你的應用程序在通過隱身窗口訪問時發生故障。
IndexedDB 是否適合你的應用程序?
基于 IndexedDB 提供的許多功能，這個百萬美元問題的答案可能是 Yes! 然而，在下結論之前，請問自己以下問題。
你的應用程序需要脫機訪問嗎?
你是否需要在客戶端存儲大量數據?
你是否需要快速查找 / 搜索大量數據中的數據?
你的應用程序是否使用 IndexedDB 支持的瀏覽器訪問客戶端存儲?
你是否需要存儲各種類型的數據，包括 JavaScript 對象?
從客戶端存儲進行寫入 / 讀取是否需要非阻塞?
如果對上述所有問題的回答均為“是”，則 IndexedDB 是你的最佳選擇。但如果不需要這樣的功能，你不妨選擇像 localStorage 這樣的存儲方法，因為它提供了廣泛的瀏覽器應用，并且具有易于使用的 API。
總結
當我們考慮所有的客戶端存儲機制時，IndexedDB 是一個明顯的贏家。我們來看看不同客戶端存儲方式的總結比較。
感謝各位的閱讀，以上就是“怎么使用 IndexedDB”的內容了，經過本文的學習后，相信大家對怎么使用 IndexedDB 這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是丸趣 TV，丸趣 TV 小編將為大家推送更多相關知識點的文章，歡迎關注！
