如何使用IndexedDB —瀏覽器上的NoSQL數(shù)據(jù)庫

作者：張張 2021-02-19 18:05:23

運(yùn)維數(shù)據(jù)庫運(yùn)維

IndexedDB是大型NoSQL存儲(chǔ)系統(tǒng)。它使你幾乎可以將任何內(nèi)容存儲(chǔ)在用戶的瀏覽器中。除了通常的搜索，獲取和放置操作外，IndexedDB還支持事務(wù)。

[[382232]]

深入研究IndexedDB API及其在實(shí)踐中的用法。

你是否聽說過瀏覽器上的NoSQL數(shù)據(jù)庫?

你可以在下面找到IndexedDB的示例。

在本文中，我們將重點(diǎn)介紹以下內(nèi)容。

為什么我們需要IndexedDB?
我們?nèi)绾卧谖覀兊膽?yīng)用程序中使用IndexedDB?
IndexedDB的功能
IndexedDB的局限性
IndexedDB是否適合你的應(yīng)用程序?

為什么我們需要IndexedDB?

IndexedDB被認(rèn)為比localStorage更強(qiáng)大!

你知道背后的原因嗎?讓我們找出答案。

可以存儲(chǔ)比localStorage大得多的數(shù)據(jù)量

沒有像 localStorage 這樣的特殊限制(介于2.5MB和10MB之間)。最大限制取決于瀏覽器和磁盤空間。例如，基于Chrome和Chromium的瀏覽器最多允許80%的磁盤空間。如果你有100GB，則IndexedDB最多可以使用80GB的空間，單個(gè)origin最多可以使用60GB。Firefox允許每個(gè)origin最多2GB，而Safari允許每個(gè)來源最多1GB。

可以存儲(chǔ)基于{ key: value }對(duì)的任何類型的值

存儲(chǔ)不同數(shù)據(jù)類型的靈活性更高。這不僅意味著字符串，而且還意味著二進(jìn)制數(shù)據(jù)(ArrayBuffer對(duì)象，Blob對(duì)象等)。它使用對(duì)象存儲(chǔ)在內(nèi)部保存數(shù)據(jù)。

提供查找界面

這在其他瀏覽器存儲(chǔ)選項(xiàng)(例如 localStorage 和 sessionStorage)中不可用。

對(duì)于不需要持續(xù)互聯(lián)網(wǎng)連接的Web應(yīng)用程序很有用

IndexedDB對(duì)于聯(lián)機(jī)和脫機(jī)工作的應(yīng)用程序都非常有用，例如，它可以用于漸進(jìn)式Web應(yīng)用程序(PWA)中的客戶端存儲(chǔ)。

應(yīng)用狀態(tài)可以存儲(chǔ)

通過為經(jīng)常使用的用戶存儲(chǔ)應(yīng)用程序狀態(tài)，可以大大提高應(yīng)用程序的性能。稍后，應(yīng)用程序可以與后端服務(wù)器同步，并通過延遲加載來更新應(yīng)用程序。

我們來看看IndexedDB的結(jié)構(gòu)，它可以存儲(chǔ)多個(gè)數(shù)據(jù)庫。

IndexedDB的結(jié)構(gòu)

我們?nèi)绾卧谖覀兊膽?yīng)用程序中使用IndexedDB?

在以下部分中，我們將研究如何使用IndexedDB引導(dǎo)應(yīng)用程序。

1. 使用“window.indexedDB”打開數(shù)據(jù)庫連接

const openingRequest = indexedDB.open('UserDB', 1);

在這里 UserDB 是數(shù)據(jù)庫名稱，1 是數(shù)據(jù)庫的版本。這將返回一個(gè)對(duì)象，該對(duì)象是 IDBOpenDBRequest 接口的實(shí)例。

2. 創(chuàng)建對(duì)象存儲(chǔ)

打開數(shù)據(jù)庫連接后，將觸發(fā) onupgradeneeded 事件，可用于創(chuàng)建對(duì)象存儲(chǔ)。

// 創(chuàng)建UserDetails對(duì)象存儲(chǔ)庫和索引 
request.onupgradeneeded = (event) => { 
  let db = event.target.result; 
 
  // 創(chuàng)建UserDetails對(duì)象存儲(chǔ) 
  // 具有自動(dòng)遞增ID 
  let store = db.createObjectStore('UserDetails', { 
    autoIncrement: true 
  }); 
 
  // 在NIC屬性上創(chuàng)建索引 
  let index = store.createIndex('nic', 'nic', { 
    unique: true 
  }); 
};

3. 將數(shù)據(jù)插入對(duì)象存儲(chǔ)

一旦打開了與數(shù)據(jù)庫的連接，就可以在 onsuccess 事件處理程序中管理數(shù)據(jù)。插入數(shù)據(jù)發(fā)生在4個(gè)步驟中。

function insertUser(db, user) { 
  // 創(chuàng)建一個(gè)新事物 
  const txn = db.transaction('User', 'readwrite'); 
 
  // 獲取UserDetails對(duì)象存儲(chǔ) 
  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); 
  } 
 
  // 事務(wù)完成后關(guān)閉數(shù)據(jù)庫 
  txn.oncomplete = function () { 
    db.close(); 
  }; 
}

一旦創(chuàng)建了插入函數(shù)，請(qǐng)求的 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' 
   }); 
};