瀏覽器資料庫 IndexedDB 入門教程

來自：阮一峰的網路日誌

http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

一、概述

隨著瀏覽器的功能不斷增強，越來越多的網站開始考慮，將大量數據儲存在客戶端，這樣可以減少從伺服器獲取數據，直接從本地獲取數據。

現有的瀏覽器數據儲存方案，都不適合儲存大量數據：Cookie 的大小不超過4KB，且每次請求都會發送回伺服器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜索功能，不能建立自定義的索引。所以，需要一種新的解決方案，這就是 IndexedDB 誕生的背景。

通俗地說，IndexedDB 就是瀏覽器提供的本地資料庫，它可以被網頁腳本創建和操作。IndexedDB 允許儲存大量數據，提供查找介面，還能建立索引。這些都是 LocalStorage 所不具備的。就資料庫類型而言，IndexedDB 不屬於關係型資料庫（不支持 SQL 查詢語句），更接近 NoSQL 資料庫。

IndexedDB 具有以下特點。

鍵值對儲存。 IndexedDB 內部採用對象倉庫（object store）存放數據。所有類型的數據都可以直接存入，包括 JavaScript 對象。對象倉庫中，數據以"鍵值對"的形式保存，每一個數據記錄都有對應的主鍵，主鍵是獨一無二的，不能有重複，否則會拋出一個錯誤。

非同步。 IndexedDB 操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與 LocalStorage 形成對比，後者的操作是同步的。非同步設計是為了防止大量數據的讀寫，拖慢網頁的表現。

支持事務。 IndexedDB 支持事務（transaction），這意味著一系列操作步驟之中，只要有一步失敗，整個事務就都取消，資料庫回滾到事務發生之前的狀態，不存在只改寫一部分數據的情況。

同源限制 IndexedDB 受到同源限制，每一個資料庫對應創建它的域名。網頁只能訪問自身域名下的資料庫，而不能訪問跨域的資料庫。

儲存空間大 IndexedDB 的儲存空間比 LocalStorage 大得多，一般來說不少於 250MB，甚至沒有上限。

支持二進位儲存。 IndexedDB 不僅可以儲存字元串，還可以儲存二進位數據（ArrayBuffer 對象和 Blob 對象）。

二、基本概念

IndexedDB 是一個比較複雜的 API，涉及不少概念。它把不同的實體，抽象成一個個對象介面。學習這個 API，就是學習它的各種對象介面。

資料庫：IDBDatabase 對象

對象倉庫：IDBObjectStore 對象

索引： IDBIndex 對象

事務： IDBTransaction 對象

操作請求：IDBRequest 對象

指針： IDBCursor 對象

主鍵集合：IDBKeyRange 對象

下面是一些主要的概念。

資料庫

資料庫是一系列相關數據的容器。每個域名（嚴格的說，是協議 + 域名 + 埠）都可以新建任意多個資料庫。

IndexedDB 資料庫有版本的概念。同一個時刻，只能有一個版本的資料庫存在。如果要修改資料庫結構（新增或刪除表、索引或者主鍵），只能通過升級資料庫版本完成。

對象倉庫

每個資料庫包含若干個對象倉庫（object store）。它類似於關係型資料庫的表格。

數據記錄

對象倉庫保存的是數據記錄。每條記錄類似於關係型資料庫的行，但是只有主鍵和數據體兩部分。主鍵用來建立默認的索引，必須是不同的，否則會報錯。主鍵可以是數據記錄裡面的一個屬性，也可以指定為一個遞增的整數編號。

上面的對象中，id屬性可以當作主鍵。

數據體可以是任意數據類型，不限於對象。

索引

為了加速數據的檢索，可以在對象倉庫裡面，為不同的屬性建立索引。

事務

數據記錄的讀寫和刪改，都要通過事務完成。事務對象提供error、abort和complete三個事件，用來監聽操作結果。

三、操作流程

IndexedDB 資料庫的各種操作，一般是按照下面的流程進行的。這個部分只給出簡單的代碼示例，用於快速上手，詳細的各個對象的 API 請看這裡。

打開資料庫

使用 IndexedDB 的第一步是打開資料庫，使用indexedDB.open()方法。

這個方法接受兩個參數，第一個參數是字元串，表示資料庫的名字。如果指定的資料庫不存在，就會新建資料庫。第二個參數是整數，表示資料庫的版本。如果省略，打開已有資料庫時，默認為當前版本；新建資料庫時，默認為1。

indexedDB.open()方法返回一個 IDBRequest 對象。這個對象通過三種事件error、success、upgradeneeded，處理打開資料庫的操作結果。

error 事件

error事件表示打開資料庫失敗。

success 事件

success事件表示成功打開資料庫。

這時，通過request對象的result屬性拿到資料庫對象。

upgradeneeded 事件

如果指定的版本號，大於資料庫的實際版本號，就會發生資料庫升級事件upgradeneeded。

這時通過事件對象的target.result屬性，拿到資料庫實例。

新建資料庫

新建資料庫與打開資料庫是同一個操作。如果指定的資料庫不存在，就會新建。不同之處在於，後續的操作主要在upgradeneeded事件的監聽函數裡面完成，因為這時版本從無到有，所以會觸發這個事件。

通常，新建資料庫以後，第一件事是新建對象倉庫（即新建表）。

上面代碼中，資料庫新建成功以後，新增一張叫做person的表格，主鍵是id。

更好的寫法是先判斷一下，這張表格是否存在，如果不存在再新建。

如果數據記錄裡面沒有合適作為主鍵的屬性，那麼可以讓 IndexedDB 自動生成主鍵。

上面代碼中，指定主鍵為一個遞增的整數。

新建對象倉庫以後，下一步可以新建索引。

上面代碼中，IDBObject.createIndex()的三個參數分別為索引名稱、索引所在的屬性、配置對象（說明該屬性是否包含重複的值）。

新增數據

新增數據指的是向對象倉庫寫入數據記錄。這需要通過事務完成。

上面代碼中，寫入數據需要新建一個事務。新建時必須指定表格名稱和操作模式（"只讀"或"讀寫"）。新建事務以後，通過IDBTransaction.objectStore(name)方法，拿到 IDBObjectStore 對象，再通過表格對象的add()方法，向表格寫入一條記錄。

寫入操作是一個非同步操作，通過監聽連接對象的success事件和error事件，了解是否寫入成功。

讀取數據

讀取數據也是通過事務完成。

上面代碼中，objectStore.get()方法用於讀取數據，參數是主鍵的值。

遍曆數據

遍曆數據表格的所有記錄，要使用指針對象 IDBCursor。

上面代碼中，新建指針對象的openCursor()方法是一個非同步操作，所以要監聽success事件。

更新數據

更新數據要使用IDBObject.put()方法。

上面代碼中，put()方法自動更新了主鍵為1的記錄。

刪除數據

IDBObjectStore.delete()方法用於刪除記錄。

使用索引

索引的意義在於，可以讓你搜索任意欄位，也就是說從任意欄位拿到數據記錄。如果不建立索引，默認只能搜索主鍵（即從主鍵取值）。

假定新建表格的時候，對name欄位建立了索引。

現在，就可以從name找到對應的數據記錄了。

●編號358，輸入編號直達本文

●輸入m獲取文章目錄

推薦↓↓↓

Web開發

更多推薦《18個技術類公眾微信》

涵蓋：程序人生、演算法與數據結構、黑客技術與網路安全、大數據技術、前端開發、Java、Python、Web開發、安卓開發、iOS開發、C/C++、.NET、Linux、資料庫、運維等。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！