如何用IndexedDB在浏览器中存储大量结构化数据？-js教程-PHP中文网

如何用IndexedDB在浏览器中存储大量结构化数据？

幻影之瞳

发布： 2025-10-01 09:15:02

原创

339人浏览过

IndexedDB 可高效存储大量结构化数据，通过 open 创建数据库，onupgradeneeded 定义对象仓库，事务机制支持读写操作，结合索引与游标优化查询性能。

如何用indexeddb在浏览器中存储大量结构化数据？

在浏览器中存储大量结构化数据时，IndexedDB 是一个强大且高效的解决方案。它是一个低层 API，允许你在用户设备上直接保存键值对，支持复杂查询和事务处理，适合需要离线操作或高性能本地存储的应用场景。

创建并连接数据库

使用 IndexedDB 的第一步是打开或创建一个数据库。如果数据库不存在，IndexedDB 会自动创建它。

代码示例：

const request = indexedDB.open('MyAppDB', 1); request.onerror = (event) => { console.error('无法打开数据库'); }; request.onsuccess = (event) => { const db = event.target.result; console.log('数据库打开成功'); }; request.onupgradeneeded = (event) => { const db = event.target.result; if (!db.objectStoreNames.contains('items')) { db.createObjectStore('items', { keyPath: 'id', autoIncrement: true }); } };

说明： 第一次打开数据库或版本升级时会触发 onupgradeneeded，在这里可以定义对象仓库（类似表）。

写入和读取数据

通过事务机制，你可以安全地插入、读取或更新数据。

添加数据：

function addItem(db, item) { const transaction = db.transaction(['items'], 'readwrite'); const store = transaction.objectStore('items'); const request = store.add(item); request.onsuccess = () => { console.log('数据已添加'); }; }

读取数据：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

function getItem(db, id) { const transaction = db.transaction(['items'], 'readonly'); const store = transaction.objectStore('items'); const request = store.get(id); request.onsuccess = (event) => { console.log('读取结果:', event.target.result); }; }

所有操作都基于事务，确保数据一致性。写操作需声明 'readwrite' 模式。