如何使用indexedDB將無限*數據存儲在瀏覽器中

>本文探討了IndexedDB，這是一種可用於客戶端數據存儲的強大瀏覽器API，超過了替代方法的能力。 客戶端數據存儲選項已大大擴展，為基於服務器的數據庫更新提供了替代方案。

indexedDB的關鍵優點：>

高存儲容量：
• indexedDB比其他客戶端選項提供了更多的存儲空間，該選項可能至少提供1GB，並且每個域可用磁盤空間的60％。 >異步操作：
它的異步性質允許背景處理而無需阻止其他腳本，非常適合大型數據集。 >
• 綜合性的CRUD操作：支持創建，閱讀，更新和刪除記錄（CRUD），以及數據庫版本和架構管理。
• 數據完整性：通過交易維持數據完整性，以確保所有操作成功或失敗。 > 基於密鑰的數據訪問：
• 數據位於對象存儲中，並由按鍵確定的記錄。 >
>瀏覽器DevTools集成：通過瀏覽器DevTools促進調試和管理，啟用數據檢查，修改和清除。
• > 庫支持：
>
• 雖然不向現代JavaScript特徵諸如Promises和Async/等待等現代JavaScript功能，但庫 bridge bridge bridge this Gap。
>
• 為什麼選擇客戶端存儲？ 雖然服務器端存儲適用於大多數用戶數據，但客戶端存儲是有利的：> idb
設備特定的設置：

UI首選項，光/暗模式等

>>短暫的數據：上傳之前的臨時數據。

>

>

脫機數據同步：

以後在低連接區域同步的數據。
• > 漸進式Web應用程序（PWAS）：
出於可用性或隱私原因的離線功能。
• 資產緩存：
通過緩存提高了性能。
瀏覽器存儲API的比較：
• > >
> Web Storage：簡單，同步的名稱值對存儲。適用於小的非關鍵數據（每個域5MB）。
• > >緩存API：存儲HTTP請求/響應對，主要由服務工作者用於PWA CACHING（瀏覽器的存儲變化）。 >

indexeddb：用於數據，文件和blobs的客戶端NOSQL數據庫（每個域至少1GB，最多可能是可用磁盤空間的60％）。

>）。

indexeddb基礎知識：

2015年標準化（2018年的API 2.0，開發中的API 2.0）

indexedDB享有廣泛的瀏覽器支持。 本文重點介紹核心概念：

• 數據庫：頂級容器。 訪問僅限於相同的域。
>
• >對象存儲：>相關數據的名稱/值存儲（例如MongoDB中的集合或SQL中的表）。
• 鍵：對象存儲中每個記錄的唯一標識符（可以自動生成或自定義）。 >
自動啟動：
• 在記錄添加時自動增加鍵值。
索引：
• 在對象存儲中組織數據以進行有效搜索。
架構：
• >定義對象存儲，鍵和索引。
>版本：
• >架構更新的整數。 >
操作：
• 數據庫操作（crud）。 >
交易：
• 包裝操作以確保數據完整性（全部或全無）。 >
光標：
• 通過記錄有效地迭代，避免將所有內容加載到內存中。 > >異步執行：
>操作異步運行，允許其他代碼繼續執行。 >
• 示例數據結構（註記記錄）：
>

indexedDB使用事件和回調，缺乏本機承諾和異步/等待支持（儘管之類的庫提供了）。 通過DevTools進行調試：

：

<code class="language-javascript">{
  id: 1,
  title: "My first note",
  body: "A note about something",
  date: <date object>,
  tags: ["#first", "#note"]
}</date></code>

>瀏覽器DevTools（基於Chrome的瀏覽器中的應用程序選項卡，Firefox中的存儲）對於檢查，修改和清除索引索引數據是無價的。 idb

檢查indexedDB支持和存儲空間：

>

打開一個indexedDB連接：>

（隨後的部分詳細詳細介紹了CRUD操作，模式更新和光標用法，但原始響應提供了全面的示例。

常見問題（常見問題解答）：

<code class="language-javascript">if ('indexedDB' in window) {
  // IndexedDB supported
} else {
  console.log('IndexedDB is not supported.');
}

(async () => {
  if (!navigator.storage) return;
  const estimate = await navigator.storage.estimate();
  const available = Math.floor((estimate.quota - estimate.usage) / 1024 / 1024);
  // Check available space and proceed accordingly
})();</code>

> 原始響應包括一個全面的常見問題解答部分，涵蓋了最大存儲大小，處理大數據集，存儲限制超出限制，增加存儲限制，使用情況檢查，數據持久性，BLOB對象存儲，安全性，工作人員使用和錯誤處理。 這些都是在原始輸出中詳細介紹的。 >

以上是如何使用indexedDB將無限*數據存儲在瀏覽器中的詳細內容。更多資訊請關注PHP中文網其他相關文章！