IndexedDB离线存储与查询技巧详解

**IndexedDB离线存储与高级查询教程：打造强大的Web离线应用**。还在为Web应用的离线存储和复杂查询而烦恼吗？本文深入讲解IndexedDB，浏览器提供的强大本地数据库，它不仅能存储结构化数据，还支持索引查询，远胜localStorage。本教程将带你从零开始，学习如何使用IndexedDB创建数据库和对象仓库，掌握事务机制下的数据增删改查，以及如何利用索引和游标实现高效的复杂查询。更重要的是，我们将探讨IndexedDB在离线场景下的应用，教你如何在离线时缓存用户操作，并在网络恢复后自动同步数据，助力你构建流畅、稳定的PWA应用。掌握IndexedDB，让你的Web应用更上一层楼！

IndexedDB可存储结构化数据并支持索引查询，通过open创建数据库和对象仓库，使用事务进行增删改查，结合索引与游标实现复杂查询，并在离线时缓存操作待网络恢复后同步。

IndexedDB 是浏览器提供的一个强大的本地数据库系统，适合在离线状态下存储大量结构化数据，并支持索引和复杂查询。它不像 localStorage 那样只能存字符串，而是能处理对象、数组，甚至文件和二进制数据。

创建数据库与对象仓库

使用 IndexedDB 第一步是打开或创建一个数据库连接。如果数据库不存在，会自动创建；如果版本号更新，会触发升级操作。

let db;
const request = indexedDB.open('MyAppDB', 1);

request.onupgradeneeded = function(event) {
  db = event.target.result;
  if (!db.objectStoreNames.contains('users')) {
    const store = db.createObjectStore('users', { keyPath: 'id' });
    store.createIndex('email', 'email', { unique: true });
    store.createIndex('age', 'age', { unique: false });
  }
};

request.onsuccess = function(event) {
  db = event.target.result;
};
request.onerror = function(event) {
  console.error('DB open error:', event.target.error);
};

这里我们创建了一个名为 users 的对象仓库（object store），以 id 为主键，并为 email 和 age 字段建立了索引，便于后续高效查询。

添加与读取数据

通过事务机制可以安全地进行增删改查操作。写入数据使用 add 或 put 方法。

function addUser(user) {
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  store.add(user);
  tx.oncomplete = () => console.log('User added');
}

addUser({ id: 1, name: 'Alice', email: 'alice@example.com', age: 28 });

function getUser(id) {
  const tx = db.transaction('users', 'readonly');
  const store = tx.objectStore('users');
  const request = store.get(id);
  request.onsuccess = () => console.log(request.result);
}

执行复杂查询

利用索引和游标（cursor）可以实现条件筛选、范围查询等复杂操作。

• 通过索引查找：比如查找所有年龄大于 25 的用户

function getUsersByAge(minAge) {
  const tx = db.transaction('users', 'readonly');
  const store = tx.objectStore('users');
  const index = store.index('age');
  const range = IDBKeyRange.lowerBound(minAge);
  const results = [];
  index.openCursor(range).onsuccess = function(event) {
    const cursor = event.target.result;
    if (cursor) {
      results.push(cursor.value);
      cursor.continue();
    } else {
      console.log('Filtered users:', results);
    }
  };
}

• 组合查询：可通过多个索引分别查询后在 JS 中合并结果，或使用游标配合条件判断实现多字段过滤
• 模糊搜索：对文本字段可结合全文检索库（如 FlexSearch）将关键词索引存在 IndexedDB 中提升性能

离线场景下的数据同步

在 PWA 或移动 Web 应用中，用户可能长时间离线。此时应将操作记录暂存到 IndexedDB，待网络恢复后同步至服务器。

• 定义一个 pendingActions 表，记录未完成的增删改操作
• 监听 online/offline 事件，自动触发同步逻辑
• 使用 Service Worker 拦截请求，在无网络时返回本地缓存数据

基本上就这些。IndexedDB 虽然 API 略显繁琐，但配合封装工具（如 Dexie.js）会大幅简化开发。关键是设计好对象仓库结构和索引策略，才能高效支撑复杂查询和离线需求。

今天关于《IndexedDB离线存储与查询技巧详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！