浏览器存储与JavaScript IndexedDB高级应用-js教程-PHP中文网

浏览器存储与JavaScript IndexedDB高级应用

夢幻星辰

发布： 2025-10-26 11:05:01

原创

389人浏览过

IndexedDB 是浏览器中用于存储大量结构化数据的本地存储方案，支持异步操作、事务机制和索引查询。其核心概念包括数据库、对象仓库、索引、事务和游标。通过 open() 方法创建或打开数据库，并在 onupgradeneeded 事件中定义结构，如创建对象仓库和索引。数据操作需在事务中进行，支持 add、get、put、delete 等方法。可利用 IDBKeyRange 实现范围查询，结合游标遍历数据。为提升开发体验，建议封装 Promise 化 API，优化批量操作性能，合理处理错误与降级，并监控存储配额。掌握这些机制可显著增强 Web 应用的离线能力与数据处理性能。

浏览器存储与javascript indexeddb高级应用

IndexedDB 是现代浏览器提供的一种强大本地存储方案，适合存储大量结构化数据，包括文件和二进制对象（Blob）。相比 localStorage 和 sessionStorage，它支持异步操作、事务机制、索引查询和复杂数据类型，适用于需要离线工作或高性能数据处理的 Web 应用。

IndexedDB 核心概念解析

使用 IndexedDB 前需理解其关键组成部分：

数据库（Database）：每个应用可拥有一个或多个数据库，通过名称和版本号标识。
对象仓库（Object Store）：类似于表，用于存放记录。每条记录包含键和值，值通常是 JSON 对象。
索引（Index）：基于对象属性建立的查询加速机制，支持高效查找。
事务（Transaction）：所有读写操作必须在事务中进行，保证数据一致性。
游标（Cursor）：用于遍历大量数据或按特定条件逐条访问记录。

创建数据库与对象仓库

初始化 IndexedDB 需打开连接并在 onupgradeneeded 事件中定义结构：

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

request.onupgradeneeded = function(event) {
  const db = event.target.result;

  // 创建用户对象仓库，主键为 id
  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) {
  const db = event.target.result;
  console.log('数据库打开成功');
};

登录后复制

版本变更触发 onupgradeneeded，是修改结构的唯一时机。

立即学习“Java免费学习笔记（深入）”；

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

增删改查操作实战

通过事务执行具体操作：

添加数据：

const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.add({ id: 1, name: 'Alice', email: 'alice@example.com', age: 28 });

登录后复制

根据索引查询：

const index = store.index('email');
const getRequest = index.get('alice@example.com');
getRequest.onsuccess = () => {
  if (getRequest.result) {
    console.log('找到用户:', getRequest.result);
  }
};

登录后复制

范围查询与游标遍历：

const range = IDBKeyRange.lowerBound(18); // 年龄 >= 18
const cursorRequest = store.index('age').openCursor(range);
cursorRequest.onsuccess = function(event) {
  const cursor = event.target.result;
  if (cursor) {
    console.log('符合条件的用户:', cursor.value);
    cursor.continue();
  }
};

登录后复制