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

2. 添加联系人

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

3. 查询联系人

通过 ID 查询

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

通过索引查询

function getContactByEmail(email) {
  return new Promise((resolve, reject) => {
    const tx = window.contactDB.transaction('contacts', 'readonly');
    const index = tx.objectStore('contacts').index('email');
    const req = index.get(email);
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

4. 更新联系人

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

5. 删除联系人

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

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

function getAllContacts() {
  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 最佳实践

• 尽量使用事务包装操作以保证一致性
• 避免在事务中执行耗时操作
• 合理设计索引以优化查询性能
• 注意处理版本升级逻辑

IndexedDB 的浏览器支持情况

• Chrome, Firefox, Safari, Edge 均支持
• 移动端支持良好
• 旧版 IE 不支持

使用第三方库简化开发

• Dexie.js
• idb
• localForage

常见应用场景

• 离线数据存储
• 大型表单暂存
• 游戏状态保存
• 缓存管理

总结

IndexedDB 是 Web 端本地存储的强大解决方案，适用于需要持久化大量结构化数据的场景。通过合理使用事务、索引和游标，开发者可以构建高性能的离线应用。