html5使用indexedDB存储大量结构化数据 html5使用客户端数据库的入门-html教程-PHP中文网

html5使用indexedDB存储大量结构化数据 html5使用客户端数据库的入门

絕刀狂花

发布： 2025-10-22 18:02:01

原创

695人浏览过

IndexedDB是HTML5提供的浏览器内置数据库，用于存储大量结构化数据。它支持对象、数组、二进制等数据类型，采用异步API避免阻塞UI，具备事务机制与索引查询，适合离线应用和本地缓存场景。通过open()打开数据库，在onupgradeneeded中创建对象仓库和索引，所有增删改查操作在事务中进行。推荐使用idb或Dexie.js等库简化原生API的复杂性，并注意版本控制、错误处理与兼容性问题。掌握IndexedDB可显著提升Web应用的离线能力与性能表现。

html5使用indexeddb存储大量结构化数据 html5使用客户端数据库的入门

在现代Web应用中，当需要在浏览器端存储大量结构化数据时，IndexedDB 是HTML5提供的强大解决方案。相比 localStorage 只能存储字符串，IndexedDB 支持存储对象、数组、二进制数据（如文件、Blob），适合处理复杂和大量的本地数据，比如离线应用、待同步数据、缓存等。

什么是 IndexedDB？

IndexedDB 是一种低层 API，用于在客户端存储大量结构化数据的浏览器内置数据库。它支持事务型操作、索引查询，并可在主线程外通过异步方式运行，避免阻塞页面。

特点包括：

支持结构化数据（对象、数组、日期、File、Blob 等）
异步 API，不阻塞 UI
支持事务机制，保证数据一致性
可创建索引，实现高效查询
容量较大（通常为几十MB到数GB，取决于浏览器和设备）

基本使用步骤

要使用 IndexedDB，需经历打开数据库、创建对象仓库、执行增删改查等操作。以下是关键流程的简明说明。

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

1. 打开或创建数据库

使用 window.indexedDB.open() 打开数据库，如果不存在则会创建。

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

登录后复制

第二个参数是版本号，升级数据库结构时需递增版本号。

知我AI·PC客户端

离线运行 AI 大模型，构建你的私有个人知识库，对话式提取文件知识，保证个人文件数据安全

查看详情

2. 创建对象仓库（Object Store）

在 onupgradeneeded 事件中定义数据表（即对象仓库）和索引。

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  // 创建一个名为 'users' 的对象仓库，主键为 'id'
  if (!db.objectStoreNames.contains('users')) {
    const store = db.createObjectStore('users', { keyPath: 'id' });
    // 添加索引，便于按姓名查找
    store.createIndex('name', 'name', { unique: false });
  }
};

登录后复制

3. 增删改查操作（CRUD）

所有操作都在事务（transaction）中进行。

添加数据：

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');

  store.add({ id: 1, name: 'Alice', email: 'alice@example.com' });

  transaction.oncomplete = () => {
    console.log('数据已保存');
  };
};

登录后复制

读取数据：

const transaction = db.transaction(['users'], 'readonly');
const store = transaction.objectStore('users');
const getRequest = store.get(1);

getRequest.onsuccess = function() {
  if (getRequest.result) {
    console.log('找到用户:', getRequest.result);
  } else {
    console.log('未找到该用户');
  }
};

登录后复制

使用索引查询：

const index = store.index('name');
const search = index.get('Alice');
search.onsuccess = () => {
  console.log('通过姓名查到:', search.result);
};

登录后复制

更新数据：

store.put({ id: 1, name: 'Alice', email: 'newemail@example.com' });

登录后复制

删除数据：

store.delete(1);

登录后复制

封装与简化使用

原生 IndexedDB API 较为繁琐，建议在项目中使用封装库来提升开发效率。

idb：轻量级 Promise 封装，推荐使用
Dexie.js：功能丰富的高级封装，支持链式语法

例如使用 idb：

import { openDB } from 'idb';

const db = await openDB('MyAppDB', 1, {
  upgrade(db) {
    db.createObjectStore('users', { keyPath: 'id' });
  }
});

await db.add('users', { id: 1, name: 'Bob' });
const user = await db.get('users', 1);

登录后复制