前端数据库 IndexedDB 详解：构建离线 Web 应用

2. 添加联系人

function addContact(contact) {
  return new Promise((resolve, reject) => {
    const tx = window.contactDB.transaction(['contacts'], 'readwrite');
    const store = tx.objectStore('contacts');
    const request = store.add(contact);
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

3. 查询联系人

通过 ID 查询

function getContact(id) {
  return new Promise((resolve, reject) => {
    const tx = window.contactDB.transaction(['contacts'], 'readonly');
    const store = tx.objectStore('contacts');
    const request = store.get(id);
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

通过索引查询

function searchByName(name) {
  return new Promise((resolve, reject) => {
    const tx = window.contactDB.transaction(['contacts'], 'readonly');
    const store = tx.objectStore('contacts');
    const index = store.index('name');
    const request = index.getAll(name);
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

4. 更新联系人

function updateContact(contact) {
  return new Promise((resolve, reject) => {
    const tx = window.contactDB.transaction(['contacts'], 'readwrite');
    const store = tx.objectStore('contacts');
    const request = store.put(contact);
    request.onsuccess = () => resolve();
    request.onerror = () => reject(request.error);
  });
}

5. 删除联系人

function deleteContact(id) {
  return new Promise((resolve, reject) => {
    const tx = window.contactDB.transaction(['contacts'], 'readwrite');
    const store = tx.objectStore('contacts');
    const request = store.delete(id);
    request.onsuccess = () => resolve();
    request.onerror = () => reject(request.error);
  });
}

6. 高级查询：使用游标和范围

function listAllContacts() {
  return new Promise((resolve, reject) => {
    const tx = window.contactDB.transaction(['contacts'], 'readonly');
    const store = tx.objectStore('contacts');
    const cursorRequest = store.openCursor();
    const results = [];
    cursorRequest.onsuccess = (event) => {
      const cursor = event.target.result;
      if (cursor) {
        results.push(cursor.value);
        cursor.continue();
      } else {
        resolve(results);
      }
    };
    cursorRequest.onerror = () => reject(cursorRequest.error);
  });
}

IndexedDB 最佳实践

• 始终在事务中执行操作以保证数据一致性
• 避免在事务中执行耗时操作，防止阻塞 UI
• 合理设计对象存储的键路径和索引以优化查询性能
• 定期清理过期数据，避免数据库体积过大

IndexedDB 的浏览器支持情况

IndexedDB 在现代浏览器中均有良好支持，包括 Chrome、Firefox、Safari 和 Edge。对于旧版 IE 不支持，但在当前主流开发环境中通常无需考虑兼容性问题。

使用第三方库简化开发

虽然原生 API 功能强大，但异步回调嵌套较深。可以使用 Dexie.js 等第三方库来简化操作，提供更友好的 Promise 接口。

常见应用场景

• 离线 Web 应用数据存储
• 大型表单数据的本地缓存
• 游戏状态保存
• 日志记录与审计

总结

IndexedDB 是前端开发中处理复杂数据结构的重要工具。通过理解其核心概念并掌握基本操作方法，开发者可以构建出功能丰富且体验流畅的离线 Web 应用。