引言：为什么需要前端数据库？

在现代Web开发中，我们经常需要处理大量结构化数据。传统的localStorage和sessionStorage虽然简单易用，但只能存储少量字符串数据，无法满足复杂应用的需求。IndexedDB应运而生——这是一个功能强大的浏览器内置数据库，支持存储大量结构化数据，提供索引、事务等高级功能，是实现离线应用、缓存机制和复杂数据处理的理想选择。

IndexedDB核心概念解析

1. 数据库（Database）

• 每个源（协议+域名+端口）可以创建多个数据库
• 每个数据库包含多个对象存储（类似于SQL中的表）

2. 对象存储（Object Store）

• 存储键值对集合的主要容器
• 键可以是路径、自增数字或自定义键生成器
• 值可以是任何结构化可克隆对象

3. 索引（Index）

• 允许高效查询对象存储中的数据
• 可以基于对象属性创建多个索引
• 支持唯一索引约束

4. 事务（Transaction）

• 所有操作都在事务中执行
• 三种模式：只读（readonly）、读写（readwrite）和版本变更（versionchange）
• 提供原子性保证（全部成功或全部失败）

5. 游标（Cursor）

• 用于遍历对象存储或索引中的记录
• 支持方向控制（前进/后退）和范围查询

完整代码示例：实现一个联系人管理器

1. 初始化数据库

// 打开或创建数据库
const dbName = 'ContactDB';
const dbVersion = 1;

const request = indexedDB.open(dbName, dbVersion);

request.onerror = (event) => {
  console.error('数据库打开失败:', event.target.error);
};

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  
  // 创建对象存储（如果不存在）
  if (!db.objectStoreNames.contains('contacts')) {
    const store = db.createObjectStore('contacts', {
      keyPath: 'id',
      autoIncrement: true
    });
    
    // 创建索引
    store.createIndex('name', 'name', { unique: false });
    store.createIndex('email', 'email', { unique: true });
    store.createIndex('phone', 'phone', { unique: false });
    store.createIndex('group', 'group', { unique: false });
  }
};

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log('数据库成功打开');
  // 存储数据库引用供后续使用
  window.contactDB = db;
};

2. 添加联系人

function addContact(contact) {
  return new Promise((resolve, reject) => {
    if (!window.contactDB) {
      reject(new Error('数据库未初始化'));
      return;
    }

    const transaction = window.contactDB.transaction(['contacts'], 'readwrite');
    const store = transaction.objectStore('contacts');
    
    const request = store.add(contact);
    
    request.onsuccess = () => {
      console.log('联系人添加成功');
      resolve(request.result); // 返回新联系人的ID
    };
    
    request.onerror = (event) => {
      console.error('添加联系人失败:', event.target.error);
      reject(event.target.error);
    };
  });
}

// 使用示例
const newContact = {
  name: '张三',
  email: '[email protected]',
  phone: '13800138000',
  group: '同事'
};

addContact(newContact)
  .then(id => console.log(`添加成功，ID: ${id}`))
  .catch(error => console.error('添加失败:', error));

3. 查询联系人

通过ID查询

function getContact(id) {
  return new Promise((resolve, reject) => {
    const transaction = window.contactDB.transaction(['contacts']);
    const store = transaction.objectStore('contacts');
    
    const request = store.get(id);
    
    request.onsuccess = () => {
      if (request.result) {
        resolve(request.result);
      } else {
        reject(new Error('联系人不存在'));
      }
    };
    
    request.onerror = (event) => {
      reject(event.target.error);
    };
  });
}

通过索引查询

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

4. 更新联系人

function updateContact(contact) {
  return new Promise((resolve, reject) => {
    if (!contact.id) {
      reject(new Error('联系人ID缺失'));
      return;
    }
    
    const transaction = window.contactDB.transaction(['contacts'], 'readwrite');
    const store = transaction.objectStore('contacts');
    
    const request = store.put(contact);
    
    request.onsuccess = () => {
      resolve();
    };
    
    request.onerror = (event) => {
      reject(event.target.error);
    };
  });
}

5. 删除联系人

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

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

// 获取名字以特定字母开头的联系人
function getContactsByNamePrefix(prefix) {
  return new Promise((resolve, reject) => {
    const transaction = window.contactDB.transaction(['contacts']);
    const store = transaction.objectStore('contacts');
    const index = store.index('name');
    
    // 创建范围：从prefix开始，到prefix + 'z'结束
    const range = IDBKeyRange.bound(prefix, prefix + '\uffff');
    
    const contacts = [];
    const request = index.openCursor(range);
    
    request.onsuccess = (event) => {
      const cursor = event.target.result;
      if (cursor) {
        contacts.push(cursor.value);
        cursor.continue();
      } else {
        resolve(contacts);
      }
    };
    
    request.onerror = (event) => {
      reject(event.target.error);
    };
  });
}

IndexedDB最佳实践

1. 事务管理

   • 保持事务尽可能短
   • 按需选择事务模式（优先使用只读事务）
   • 避免在事务中执行长时间操作

2. 错误处理

   • 始终处理onerror事件
   • 使用Promise包装API调用
   • 考虑事务失败后的重试机制

3. 性能优化

   • 批量操作使用单个事务
   • 游标遍历时使用continuePrimaryKey优化性能
   • 合理使用索引提高查询效率

4. 存储限制

   • 浏览器通常允许存储最多50%的磁盘空间
   • 使用navigator.storage.estimate()检查可用空间
   • 处理QuotaExceededError错误

5. 版本迁移

   • 在onupgradeneeded中处理数据库结构变更
   • 使用版本号控制数据库模式
   • 提供数据迁移脚本

IndexedDB的浏览器支持情况

使用第三方库简化开发

对于复杂应用，可以考虑使用这些库简化IndexedDB操作：

1. Dexie.js - 提供类似SQL的API

   const db = new Dexie('ContactDB');
   db.version(1).stores({
     contacts: '++id, name, email, phone, group'
   });
   
   // 添加联系人
   db.contacts.add(newContact);
   
   // 查询
   db.contacts.where('group').equals('同事').toArray();
   

2. localForage - 提供类似localStorage的简单API，支持多种存储后端

3. idb - 基于Promise的轻量级IndexedDB封装

常见应用场景

1. 离线应用 - 缓存API响应，在离线时提供数据
2. 文件存储 - 存储用户上传的文件和二进制数据
3. 游戏状态保存 - 保存复杂的游戏进度和状态
4. 内容编辑器 - 自动保存草稿和历史版本
5. 数据分析 - 在客户端处理大量数据集

总结

IndexedDB是前端开发中最强大的本地存储解决方案，它提供了：

• 大容量存储 - 远超localStorage的存储能力
• 结构化数据 - 支持复杂对象而非仅字符串
• 高级查询 - 通过索引和游标实现高效数据检索
• 事务支持 - 确保数据操作的原子性和一致性
• 异步操作 - 不阻塞主线程，提供良好用户体验

掌握IndexedDB将使你能够构建功能强大的离线优先应用，提供接近原生应用的用户体验。虽然API相对底层，但通过合理封装和使用第三方库，可以高效地利用这一强大技术。

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/yuanxifan/article/details/150041036