💓 博客主页：瑕疵的CSDN主页

📝 Gitee主页：瑕疵的gitee主页

⏩ 文章专栏：《热点资讯》

---

IndexedDB 是浏览器内置的 NoSQL 数据库，专为需要在客户端存储大量结构化数据的应用设计。相比 localStorage 和 Web SQL，它提供了更高的存储容量（通常可达数百 MB 到几 GB）、异步非阻塞 API、事务支持以及高效的索引查询能力。

1. 键值对存储：数据以对象仓库（Object Store）形式存储，支持复杂数据类型（如 JSON、Blob、ArrayBuffer）。
2. 异步操作：避免阻塞主线程，提升用户体验。
3. 事务支持：通过 ACID 事务保证数据一致性。
4. 索引查询：支持为字段创建索引，加速数据检索。
5. 大容量存储：突破 localStorage 5MB 的限制。

---

通过 indexedDB.open() 方法打开或创建数据库，并在 onupgradeneeded 回调中定义对象仓库和索引。

const request = indexedDB.open("MyDatabase", 3);  
request.onupgradeneeded = function(event) {  
  const db = event.target.result;  
  if (!db.objectStoreNames.contains("users")) {  
    const store = db.createObjectStore("users", { keyPath: "id", autoIncrement: true });  
    store.createIndex("email", "email", { unique: true });  
    store.createIndex("name", "name", { unique: false });  
  }  
};  

当数据库版本升级时，需通过 onupgradeneeded 处理数据迁移。

request.onupgradeneeded = function(event) {  
  const db = event.target.result;  
  const oldVersion = event.oldVersion;  
  if (oldVersion < 2) {  
    // 从版本 1 到 2 的迁移逻辑  
    const tx = db.transaction("users", "readwrite");  
    const store = tx.objectStore("users");  
    store.add({ id: 1, name: "系统管理员" });  
  }  
};  

遵循 事务最小化原则，避免长时间持有锁。

async function updateUser(userData) {  
  const tx = db.transaction("users", "readwrite");  
  const store = tx.objectStore("users");  
  try {  
    await store.put(userData);  
    await tx.complete; // 显式提交事务  
    return true;  
  } catch (error) {  
    tx.abort(); // 异常时回滚  
    console.error("事务失败:", error);  
    return false;  
  }  
}  

---

通过事务一次性处理多条记录，减少 I/O 操作。

function addMultipleItems(db, items) {  
  return new Promise((resolve, reject) => {  
    const transaction = db.transaction(["myObjectStore"], "readwrite");  
    const objectStore = transaction.objectStore("myObjectStore");  
    items.forEach(item => objectStore.add(item));  
    transaction.oncomplete = () => resolve();  
    transaction.onerror = () => reject(transaction.error);  
  });  
}  

• 高选择性优先：为查询频率高的字段创建索引。
• 复合索引：按字段的选择性排序（如 user_id + timestamp）。
• 定期审查：使用 IDBObjectStore.indexNames 监控索引使用情况。

通过 navigator.storage.estimate() 监控存储使用情况。

async function checkStorage() {  
  const estimate = await navigator.storage.estimate();  
  console.log(`已使用: ${estimate.usage} bytes`);  
  console.log(`剩余空间: ${estimate.quota - estimate.usage} bytes`);  
}  

对于高频访问的数据，可结合 内存缓存 减少数据库查询。

const memoryCache = new Map();  
function getCachedData(key) {  
  if (memoryCache.has(key)) return memoryCache.get(key);  
  const request = db.transaction("data").objectStore("data").get(key);  
  request.onsuccess = function(event) {  
    const result = event.target.result;  
    memoryCache.set(key, result);  
    return result;  
  };  
}  

---

IndexedDB 可用于离线应用（如 PWA），配合 Service Worker 缓存 API 响应。

// Service Worker 中缓存数据  
self.addEventListener("fetch", function(event) {  
  event.respondWith(  
    caches.match(event.request).then(function(response) {  
      return response || fetch(event.request);  
    })  
  );  
});  

支持存储大文件（如图片、视频）或 Wasm 模块。

const blob = new Blob([fileData], { type: "image/png" });  
const request = db.transaction("files", "readwrite").objectStore("files").add(blob, "avatar.png");  

---

IndexedDB 是前端离线数据存储的首选方案，尤其适合处理 大规模结构化数据 和 复杂查询需求。通过以下实践可显著提升性能：

1. 合理设计索引：避免冗余索引，优化查询效率。
2. 批量操作：减少事务次数，降低 I/O 开销。
3. 事务最小化：避免长时间持有锁，提高并发性。
4. 内存缓存：减少重复查询，提升响应速度。

---

• 
  
• 《前端工程师必会的 10 种缓存策略优化方案》（CSDN）
• 《前端 Pyodide 性能优化：利用 IndexedDB 缓存 Wasm 模块》（PHP 中文网）