開發者工具中的 IndexedDB 實戰指南：離線存儲、緩存優化，玩轉瀏覽器數據庫！
作者：郝光明
IndexedDB它是構建現代、高性能、離線友好型 Web 應用的基石之一。對于前端開發工程師來說屬于必備技能。希望本篇文章能對大家了解IndexedDB技術提供一些幫助！
作為一名資深的前端開發者，試想一下這個場景：凌晨1點，咖啡見底，你正在為一個復雜的表單草稿丟失而抓狂。當用戶關掉瀏覽器，表單數據就沒了？或者，你雄心勃勃地想做一款離線也能流暢操作的PWA應用，數據存哪？localStorage 5MB不夠用？Cookies 太小還不安全？這時候，瀏覽器角落里那個名字有點唬人的家伙——IndexedDB，是否猶如靈感般出現在你的腦海中！
沒錯今天的要分享的主角就是瀏覽器開發工具中的IndexDB技術，感興趣的前端朋友可以來了解一下！
一、 IndexedDB 介紹
IndexedDB英文全稱為Indexed Database API，簡單來說IndexedDB 是瀏覽器內置的一個事務型、NoSQL 數據庫系統。 它讓你能在用戶的瀏覽器里持久化存儲大量結構化數據（對象、文件/blob等），并且支持高性能的索引查詢。目前主流的瀏覽器都支持IndexedDB，比如：Chrome，Firefox,Opera,Safari完全支持IndexDB,IE10/IE11和Edge部分支持。
核心概念：
圖片
數據庫 (Database)： 一個獨立命名的存儲容器。每個域名下可以創建多個DB。
對象倉庫 (Object Store)： 相當于數據庫里的“表”，用于存儲特定類型的JavaScript對象（鍵值對集合）。每個對象有一個唯一鍵。
索引 (Index)： 在對象倉庫上建立的，用于快速按非主鍵字段查詢數據的結構。
事務 (Transaction)： 所有讀寫操作都必須在事務中進行，保證操作的原子性和一致性（要么全成功，要么全失敗）。
游標 (Cursor)： 用于遍歷對象倉庫或索引中的大量數據。
鍵 (Key)： 可以是數字、字符串、日期、數組，甚至是二進制數據。可以是對象本身的屬性（內聯鍵），也可以單獨指定（外聯鍵）。
二、 IndexedDB的特點
圖片
海量存儲： 瀏覽器通常允許單個IndexedDB數據庫占用大量磁盤空間。存個幾MB、幾十MB甚至更大的數據（如圖片緩存、文檔草稿）完全沒問題。
結構化、支持索引： 不像 localStorage 只能存字符串。IndexedDB 存的是 JavaScript 對象。更重要的是，你可以創建索引，實現高效查詢（比如按用戶名、按時間戳快速查找）。
異步操作： 所有API都是異步的（基于事件或Promise），不會阻塞主線程，保證了頁面流暢性。
事務支持： 保證了數據操作的完整性和一致性。尤其在復雜操作（先讀A再寫B再更新C）時非常關鍵。
同源策略： 和 localStorage 一樣，遵守同源策略。不同域無法訪問。
支持二進制數據 (Blob/File)： 可以直接存儲圖片、音頻、文件片段等二進制數據，這對于離線圖片預覽、文檔緩存等場景非常有用。
三、 使用場景
圖片
離線優先應用 (PWA)： 這是 IndexedDB 的主要戰場！在用戶離線時，將應用數據（用戶配置、文章草稿、消息記錄、商品列表、圖片資源等）完整保存在本地。網絡恢復后再同步到服務器。提供無縫的離線體驗。
富文本編輯器 / 復雜表單的自動保存： 用戶輸入內容頻繁地、靜默地保存到 IndexedDB。即使瀏覽器崩潰、頁面意外關閉，也能恢復大部分內容。比頻繁請求服務器保存高效得多。
大型應用數據的客戶端緩存： 對于數據量較大、更新頻率不高（或增量更新）的數據（如城市列表、商品分類、用戶歷史記錄、配置信息），首次加載后存入 IndexedDB。后續訪問優先從本地讀取，極大提升加載速度和用戶體驗，減少服務器壓力。
客戶端日志/分析數據持久化： 收集的用戶行為日志、錯誤報告等，可以先批量存儲在 IndexedDB 中，待網絡良好或有足夠數量時再統一上報服務器，避免因網絡波動導致數據丟失。
文件/資源的本地緩存： 如圖片庫、文檔查看器。用戶訪問過的圖片或文檔可以緩存在 IndexedDB 中，下次訪問無需下載，實現秒開。
游戲狀態保存： 網頁游戲的關卡進度、玩家屬性、裝備信息等，可以方便地保存在 IndexedDB 中。
四、在谷歌開發者工具中使用IndexedDB
這里使用谷歌瀏覽器開發者工具切換為中文界面來演示
找到它： 打開 谷歌開發者工具 (F12 / Cmd+Opt+I / Ctrl+Shift+I) -> 切換到 應用 面板 -> 左側菜單找到 存儲 下的 IndexedDB。你會看到當前頁面域名下的所有 IndexedDB 數據庫。
圖片
查看數據庫結構：
圖片
點擊數據庫名展開，能看到它包含的 Object Stores。
點擊 Object Store 名字，右側面板會展示其存儲的數據列表（鍵值對）。
注意看 Key Path 和 Indexes，這決定了數據的組織和查詢方式。
查看數據：
圖片
在右側數據列表里，可以直接看到存儲的 JavaScript 對象。
右鍵數據行，可以執行 Delete 操作。
圖片
篩選與搜索：
圖片
在 Object Store 數據視圖的頂部，有篩選輸入框。可以根據鍵 (Key) 或值 (Value) 進行過濾（支持部分匹配）。
對于大型數據集，篩選功能非常實用。
清空與刪除：
圖片
清空 Object Store： 右鍵點擊某個 Object Store -> Clear object store。瞬間清空這個“表”的所有數據。
刪除 Object Store / Index： 右鍵點擊 -> Delete。注意：這會刪除結構定義和數據！
刪除整個數據庫： 直接在 應用-> 刪除數據庫 里勾選 IndexedDB 進行清除。
圖片
調試事務與錯誤：
在 控制臺面板中，你的代碼操作 IndexedDB 時產生的錯誤（權限問題、版本沖突、約束錯誤等）會清晰地打印出來。結合開發者工具中的源代碼面板斷點調試，定位問題效率極高。
高級)性能分析： 在 性能標簽面板錄制操作時，可以看到 IndexedDB 讀寫操作的耗時，幫助優化數據庫設計（如索引是否有效）。
使用技巧：
版本升級： 修改數據庫結構（增刪 Object Store/Index）需要升級 db.version。DevTools 里能看到當前版本號。升級邏輯要在 onupgradeneeded 事件里寫。務必在DevTools里測試好升級邏輯！ 否則線上用戶數據可能出問題。
異步地獄： 原生 API 是基于事件的回調，寫起來容易嵌套。強烈推薦使用封裝庫：Dexie.js, idb (Jake Archibald 的輕量封裝) 等。它們提供 Promise API，代碼清爽幾十倍！在 DevTools 里調試時，這些庫操作的數據同樣可見。
存儲限制與回收： 瀏覽器在磁盤空間不足時可能清除 IndexedDB 數據）。重要數據要有備份或同步機制。
DevTools 是上帝視角： 你在 DevTools 里做的刪除操作，是“超能力”，不受代碼事務限制。線上環境用戶可沒這能力！ 所以你的代碼邏輯（增刪改查、事務處理、錯誤捕獲）才是王道，開發者工具主要是輔助驗證和調試的。
五、代碼實戰
5.1 簡單增刪改查示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IndexedDB 增刪改查示例</title></head><body> <button id="addBtn">添加數據</button> <button id="deleteBtn">刪除數據</button> <button id="updateBtn">更新數據</button> <button id="queryBtn">查詢數據</button> <script> // 打開或創建數據庫 const request = indexedDB.open('myDatabase', 1); // 數據庫打開失敗 request.onerror = function (event) { console.error('數據庫打開失敗:', event.target.errorCode); }; // 數據庫打開成功 request.onsuccess = function (event) { const db = event.target.result; console.log('數據庫打開成功'); // 添加數據 document.getElementById('addBtn').addEventListener('click', function () { const transaction = db.transaction(['myObjectStore'], 'readwrite'); const objectStore = transaction.objectStore('myObjectStore'); const data = { id: 1, name: '李強', age: 30 }; const addRequest = objectStore.add(data); addRequest.onsuccess = function () { console.log('數據添加成功'); }; addRequest.onerror = function (event) { console.error('數據添加失敗:', event.target.errorCode); }; }); // 刪除數據 document.getElementById('deleteBtn').addEventListener('click', function () { const transaction = db.transaction(['myObjectStore'], 'readwrite'); const objectStore = transaction.objectStore('myObjectStore'); const deleteRequest = objectStore.delete(1); deleteRequest.onsuccess = function () { console.log('數據刪除成功'); }; deleteRequest.onerror = function (event) { console.error('數據刪除失敗:', event.target.errorCode); }; }); // 更新數據 document.getElementById('updateBtn').addEventListener('click', function () { const transaction = db.transaction(['myObjectStore'], 'readwrite'); const objectStore = transaction.objectStore('myObjectStore'); const data = { id: 1, name: 'Jane', age: 30 }; const putRequest = objectStore.put(data); putRequest.onsuccess = function () { console.log('數據更新成功'); }; putRequest.onerror = function (event) { console.error('數據更新失敗:', event.target.errorCode); }; }); // 查詢數據 document.getElementById('queryBtn').addEventListener('click', function () { const transaction = db.transaction(['myObjectStore'], 'readonly'); const objectStore = transaction.objectStore('myObjectStore'); const getRequest = objectStore.get(1); getRequest.onsuccess = function (event) { const result = event.target.result; if (result) { console.log('查詢結果:', result); } else { console.log('未找到數據'); } }; getRequest.onerror = function (event) { console.error('數據查詢失敗:', event.target.errorCode); }; }); }; // 數據庫版本更新時創建對象倉庫和索引 request.onupgradeneeded = function (event) { const db = event.target.result; if (!db.objectStoreNames.contains('myObjectStore')) { const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' }); objectStore.createIndex('name', 'name', { unique: false }); objectStore.createIndex('age', 'age', { unique: false }); } }; </script></body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IndexedDB 增刪改查示例</title>
</head>
<body>
<button id="addBtn">添加數據</button>
<button id="deleteBtn">刪除數據</button>
<button id="updateBtn">更新數據</button>
<button id="queryBtn">查詢數據</button>
<script>
// 打開或創建數據庫
const request = indexedDB.open('myDatabase', 1);
// 數據庫打開失敗
request.onerror = function (event) {
console.error('數據庫打開失敗:', event.target.errorCode);
};
// 數據庫打開成功
request.onsuccess = function (event) {
const db = event.target.result;
console.log('數據庫打開成功');
// 添加數據
document.getElementById('addBtn').addEventListener('click', function () {
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const data = { id: 1, name: '李強', age: 30 };
const addRequest = objectStore.add(data);
addRequest.onsuccess = function () {
console.log('數據添加成功');
};
addRequest.onerror = function (event) {
console.error('數據添加失敗:', event.target.errorCode);
};
});
// 刪除數據
document.getElementById('deleteBtn').addEventListener('click', function () {
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const deleteRequest = objectStore.delete(1);
deleteRequest.onsuccess = function () {
console.log('數據刪除成功');
};
deleteRequest.onerror = function (event) {
console.error('數據刪除失敗:', event.target.errorCode);
};
});
// 更新數據
document.getElementById('updateBtn').addEventListener('click', function () {
const transaction = db.transaction(['myObjectStore'], 'readwrite');
const objectStore = transaction.objectStore('myObjectStore');
const data = { id: 1, name: 'Jane', age: 30 };
const putRequest = objectStore.put(data);
putRequest.onsuccess = function () {
console.log('數據更新成功');
};
putRequest.onerror = function (event) {
console.error('數據更新失敗:', event.target.errorCode);
};
});
// 查詢數據
document.getElementById('queryBtn').addEventListener('click', function () {
const transaction = db.transaction(['myObjectStore'], 'readonly');
const objectStore = transaction.objectStore('myObjectStore');
const getRequest = objectStore.get(1);
getRequest.onsuccess = function (event) {
const result = event.target.result;
if (result) {
console.log('查詢結果:', result);
} else {
console.log('未找到數據');
}
};
getRequest.onerror = function (event) {
console.error('數據查詢失敗:', event.target.errorCode);
};
});
};
// 數據庫版本更新時創建對象倉庫和索引
request.onupgradeneeded = function (event) {
const db = event.target.result;
if (!db.objectStoreNames.contains('myObjectStore')) {
const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('age', 'age', { unique: false });
}
};
</script>
</body>
</html>
圖片
5.2 存儲圖片和現實圖片示例
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IndexedDB 圖片存儲（原生JS）</title> <style> .preview { border: 1px solid #ddd; min-height: 300px; margin: 20px 0; } button { padding: 8px 12px; margin-right: 10px; } </style></head><body> <input type="file" id="fileInput" accept="image/*"> <button id="storeBtn">存儲圖片</button> <button id="loadBtn">加載最新圖片</button> <div class="preview"> <img id="dbImage" style="max-width: 100%; display: none;"> </div> <div id="status">就緒</div> <script> // 核心配置 const DB_NAME = "ImageDB"; const STORE_NAME = "images"; const DB_VERSION = 1; let db = null; // 狀態更新 function updateStatus(message) { document.getElementById('status').textContent = message; } // 1. 初始化數據庫（Promise封裝） function initDB() { return new Promise((resolve, reject) => { const request = indexedDB.open(DB_NAME, DB_VERSION); // 數據庫結構升級 request.onupgradeneeded = (event) => { const db = event.target.result; // 關鍵修復：確保對象存儲存在 if (!db.objectStoreNames.contains(STORE_NAME)) { db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true }); updateStatus("對象存儲創建成功"); } }; request.onsuccess = (event) => { db = event.target.result; updateStatus("數據庫已連接"); resolve(db); }; request.onerror = (event) => { updateStatus(`數據庫錯誤: ${event.target.error}`); reject(event.target.error); }; }); } // 2. 存儲圖片到數據庫 async function storeImage() { const file = document.getElementById('fileInput').files[0]; if (!file) { updateStatus("請選擇圖片文件"); return; } try { // 讀取為ArrayBuffer（兼容性更好） const arrayBuffer = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = () => reject(reader.error); reader.readAsArrayBuffer(file); }); const transaction = db.transaction([STORE_NAME], 'readwrite'); const store = transaction.objectStore(STORE_NAME); // 構建元數據對象 const imageData = { name: file.name, type: file.type, size: file.size, timestamp: new Date(), imageData: arrayBuffer }; // 存儲操作 const request = store.add(imageData); request.onsuccess = () => { updateStatus(`圖片存儲成功 ID: ${request.result}`); }; request.onerror = (event) => { updateStatus(`存儲失敗: ${event.target.error}`); }; } catch (error) { updateStatus(`錯誤: ${error.message}`); } } // 3. 從數據庫加載最新圖片 async function loadLatestImage() { const transaction = db.transaction([STORE_NAME], 'readonly'); const store = transaction.objectStore(STORE_NAME); const request = store.openCursor(null, 'prev'); // 反向遍歷取最新 request.onsuccess = (event) => { const cursor = event.target.result; if (cursor) { displayImage(cursor.value); } else { updateStatus("數據庫中沒有圖片"); } }; request.onerror = (event) => { updateStatus(`加載失敗: ${event.target.error}`); }; } // 4. 顯示圖片 function displayImage(imageRecord) { const blob = new Blob([imageRecord.imageData], { type: imageRecord.type }); const imageUrl = URL.createObjectURL(blob); const imgElement = document.getElementById('dbImage'); imgElement.src = imageUrl; imgElement.style.display = 'block'; imgElement.alt = `已加載: ${imageRecord.name}`; // 釋放內存 imgElement.onload = () => URL.revokeObjectURL(imageUrl); updateStatus(`已加載: ${imageRecord.name} (${formatBytes(imageRecord.size)})`); } // 輔助函數：格式化文件大小 function formatBytes(bytes) { const units = ['B', 'KB', 'MB', 'GB']; let size = bytes; let unitIndex = 0; while (size >= 1024 && unitIndex < units.length - 1) { size /= 1024; unitIndex++; } return `${size.toFixed(2)} ${units[unitIndex]}`; } // 5. 初始化應用 window.addEventListener('DOMContentLoaded', async () => { updateStatus("正在初始化數據庫..."); try { await initDB(); // 綁定事件 document.getElementById('storeBtn').addEventListener('click', storeImage); document.getElementById('loadBtn').addEventListener('click', loadLatestImage); updateStatus("就緒：選擇圖片后點擊存儲"); } catch (error) { updateStatus(`初始化失敗: ${error.message}`); } }); </script></body></html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IndexedDB 圖片存儲（原生JS）</title>
<style>
.preview { border: 1px solid #ddd; min-height: 300px; margin: 20px 0; }
button { padding: 8px 12px; margin-right: 10px; }
</style>
</head>
<body>
<input type="file" id="fileInput" accept="image/*">
<button id="storeBtn">存儲圖片</button>
<button id="loadBtn">加載最新圖片</button>
<div class="preview">
<img id="dbImage" style="max-width: 100%; display: none;">
</div>
<div id="status">就緒</div>
<script>
// 核心配置
const DB_NAME = "ImageDB";
const STORE_NAME = "images";
const DB_VERSION = 1;
let db = null;
// 狀態更新
function updateStatus(message) {
document.getElementById('status').textContent = message;
}
// 1. 初始化數據庫（Promise封裝）
function initDB() {
return new Promise((resolve, reject) => {
const request = indexedDB.open(DB_NAME, DB_VERSION);
// 數據庫結構升級
request.onupgradeneeded = (event) => {
const db = event.target.result;
// 關鍵修復：確保對象存儲存在
if (!db.objectStoreNames.contains(STORE_NAME)) {
db.createObjectStore(STORE_NAME, {
keyPath: 'id',
autoIncrement: true
});
updateStatus("對象存儲創建成功");
}
};
request.onsuccess = (event) => {
db = event.target.result;
updateStatus("數據庫已連接");
resolve(db);
};
request.onerror = (event) => {
updateStatus(`數據庫錯誤: ${event.target.error}`);
reject(event.target.error);
};
});
}
// 2. 存儲圖片到數據庫
async function storeImage() {
const file = document.getElementById('fileInput').files[0];
if (!file) {
updateStatus("請選擇圖片文件");
return;
}
try {
// 讀取為ArrayBuffer（兼容性更好）
const arrayBuffer = await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
reader.readAsArrayBuffer(file);
});
const transaction = db.transaction([STORE_NAME], 'readwrite');
const store = transaction.objectStore(STORE_NAME);
// 構建元數據對象
const imageData = {
name: file.name,
type: file.type,
size: file.size,
timestamp: new Date(),
imageData: arrayBuffer
};
// 存儲操作
const request = store.add(imageData);
request.onsuccess = () => {
updateStatus(`圖片存儲成功 ID: ${request.result}`);
};
request.onerror = (event) => {
updateStatus(`存儲失敗: ${event.target.error}`);
};
} catch (error) {
updateStatus(`錯誤: ${error.message}`);
}
}
// 3. 從數據庫加載最新圖片
async function loadLatestImage() {
const transaction = db.transaction([STORE_NAME], 'readonly');
const store = transaction.objectStore(STORE_NAME);
const request = store.openCursor(null, 'prev'); // 反向遍歷取最新
request.onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
displayImage(cursor.value);
} else {
updateStatus("數據庫中沒有圖片");
}
};
request.onerror = (event) => {
updateStatus(`加載失敗: ${event.target.error}`);
};
}
// 4. 顯示圖片
function displayImage(imageRecord) {
const blob = new Blob([imageRecord.imageData], { type: imageRecord.type });
const imageUrl = URL.createObjectURL(blob);
const imgElement = document.getElementById('dbImage');
imgElement.src = imageUrl;
imgElement.style.display = 'block';
imgElement.alt = `已加載: ${imageRecord.name}`;
// 釋放內存
imgElement.onload = () => URL.revokeObjectURL(imageUrl);
updateStatus(`已加載: ${imageRecord.name} (${formatBytes(imageRecord.size)})`);
}
// 輔助函數：格式化文件大小
function formatBytes(bytes) {
const units = ['B', 'KB', 'MB', 'GB'];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return `${size.toFixed(2)} ${units[unitIndex]}`;
}
// 5. 初始化應用
window.addEventListener('DOMContentLoaded', async () => {
updateStatus("正在初始化數據庫...");
try {
await initDB();
// 綁定事件
document.getElementById('storeBtn').addEventListener('click', storeImage);
document.getElementById('loadBtn').addEventListener('click', loadLatestImage);
updateStatus("就緒：選擇圖片后點擊存儲");
} catch (error) {
updateStatus(`初始化失敗: ${error.message}`);
}
});
</script>
</body>
</html>查看存儲效果
加載圖片效果
圖片
六、總結
IndexedDB它是構建現代、高性能、離線友好型 Web 應用的基石之一。對于前端開發工程師來說屬于必備技能。希望本篇文章能對大家了解IndexedDB技術提供一些幫助！
互動時間：
靈魂拷問： 你負責的項目里，哪些數據最適合遷移到 IndexedDB？是用戶草稿？配置項？還是緩存的大列表？
踩坑分享： 你在使用 IndexedDB 或者用 DevTools 調試它時，遇到過什么印象深刻的“坑”？說出來讓大家避避雷！（比如詭異的版本升級失敗？）
第三方庫安利： 你更喜歡用哪個 IndexedDB 封裝庫？Dexie.js？idb？還是其他？為啥？
責任編輯：武曉燕
來源：
小明互聯網技術分享社區
