HTML5如何创建本地数据库？indexedDB和WebSQL的区别

HTML5 本地数据库主要指 IndexedDB，它专为存储大量结构化数据而设计，适合构建离线优先的 Web 应用，相比 localStorage 具有非阻塞、支持事务和索引查询等优势，但 API 较为复杂，需借助第三方库简化开发。

在 2026 年的 Web 开发语境下，前端数据的存储方式已经发生了深刻的演变，早期的 localStorage 虽然简单，但其同步阻塞特性在面对复杂业务逻辑时显得捉襟见肘，随着 PWA（渐进式 Web 应用）的普及，开发者需要一种能够像传统关系型数据库一样操作数据，同时又能无缝集成在浏览器环境中的解决方案，IndexedDB 应运而生，它成为了构建高性能、离线可用 Web 应用的核心基石。

加载中

前端本地存储IndexedDB数据库最新教程

小猪课堂

1.6万22191

原视频地址

为什么选择 IndexedDB 而非 localStorage

许多初学者在面临存储需求时,往往会在 IndexedDB 和 localStorage 之间犹豫不决，这种选择并非随意，而是基于性能、容量和架构设计的深层考量，业内专家指出，随着单页应用（SPA）复杂度的提升，同步存储带来的主线程阻塞已成为性能瓶颈。

性能差异对比

localStorage 的操作是同步的，这意味着每次读写操作都会阻塞浏览器的主线程，直到数据写入磁盘，在数据量较小且频率较低的场景下，这种影响微乎其微，当应用需要缓存大量图片元数据、用户行为日志或复杂的表单草稿时，同步操作会导致界面卡顿，用户体验急剧下降。

相比之下,IndexedDB 采用异步 API 设计，所有的数据库操作都在后台线程中执行，不会阻塞用户界面，这种非阻塞特性使得应用即使在处理 GB 级别的数据时，依然能保持流畅的交互体验。

容量与数据结构

localStorage 的容量通常限制在 5MB 左右，且仅支持字符串类型的键值对存储，对于需要存储复杂对象、二进制数据（如 Blob 或 ArrayBuffer）或进行范围查询的场景，localStorage 显得力不从心。

IndexedDB 则提供了近乎无限的存储空间（受限于用户磁盘空间），支持存储任意类型的数据，包括对象、数组、二进制流等，更重要的是，它支持建立索引，允许开发者对数据进行高效的查询、排序和范围检索，这使其具备了传统数据库的核心特征。

具体场景分析

假设你正在开发一个离线地图应用,用户需要在无网络环境下查看地图瓦片、搜索地点并保存路线，如果使用 localStorage，你需要手动序列化所有瓦片数据，并在每次搜索时遍历整个存储区域，效率极低，而使用 IndexedDB，你可以将瓦片数据以对象存储形式保存，并为地点名称建立索引，实现毫秒级的搜索响应。

IndexedDB 核心概念与架构解析

理解 IndexedDB 的工作机制是掌握其用法的前提，它并非简单的键值对存储，而是一个基于对象存储（Object Store）的 NoSQL 数据库。

数据库与对象存储

在 IndexedDB 中，数据库是顶层容器，每个数据库可以包含多个对象存储，对象存储类似于关系型数据库中的表，用于存储具体的数据记录，每个记录都有一个唯一的主键（Key），可以是自动生成的，也可以是手动指定的。

事务与版本管理

事务是 IndexedDB 保证数据一致性的核心机制，所有对数据库的修改操作都必须包裹在事务中，如果事务中的任何一步失败，整个事务将回滚，确保数据不会处于中间状态，IndexedDB 引入了版本概念，当数据库结构发生变化时，需要升级版本号，并在 onupgradeneeded 回调中执行结构变更操作。

索引的作用

索引是提升查询性能的关键,通过为对象存储中的特定字段创建索引，IndexedDB 可以快速定位数据，而无需全表扫描，索引支持唯一性约束、多值索引等高级特性，满足了复杂业务场景下的查询需求。

实操指南：如何创建本地数据库

对于开发者而言,掌握 IndexedDB 的 API 调用流程是必备技能，虽然原生 API 较为繁琐，但理解其底层逻辑有助于排查问题和优化性能。

初始化数据库连接

需要打开数据库连接,如果数据库不存在，IndexedDB 会自动创建。

const request = indexedDB.open('MyDatabase', 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  // 创建对象存储
  if (!db.objectStoreNames.contains('u
sers')) {
    const store = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
    // 创建索引
    store.createIndex('name', 'name', { unique: false });
  }
};
request.onsuccess = function(event) {
  const db = event.target.result;
  console.log('数据库打开成功');
};
request.onerror = function(event) {
  console.error('数据库打开失败', event.target.error);
};

在上述代码中,我们指定了数据库名称为 ‘MyDatabase’，版本号为 1，在 onupgradeneeded 回调中，我们创建了名为 ‘users’ 的对象存储，并设置了自增主键 ‘id’，同时为 ‘name’ 字段创建了索引。

执行增删改查操作

数据操作必须在事务中进行,以下示例展示了如何添加和查询数据。

// 添加数据
function addUser(user) {
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  const request = store.add(user);
  request.onsuccess = function() {
    console.log('用户添加成功，ID:', request.result);
  };
  request.onerror = function() {
    console.error('用户添加失败');
  };
}
// 查询数据
function getUserByName(name) {
  const transaction = db.transaction(['users'], 'readonly');
  const store = transaction.objectStore('users');
  const index = store.index('name');
  const request = index.get(name);
  request.onsuccess = function() {
    if (request.result) {
      console.log('找到用户:', request.result);
    } else {
      console.log('未找到用户');
    }
  };
}

使用第三方库简化开发

鉴于原生 IndexedDB API 的复杂性，业界广泛推荐使用第三方库来简化开发，idb 库提供了基于 Promise 的封装，使得代码更加简洁易读，PouchDB 则提供了与 CouchDB 兼容的 API，适合需要数据同步的场景。

IndexedDB 浏览器兼容性与最佳实践

在 2026 年，IndexedDB 的兼容性已经非常成熟，但仍需注意一些细节。

兼容性现状

绝大多数现代浏览器（Chrome, Firefox, Safari, Edge）都完整支持 IndexedDB，对于老旧浏览器，如 IE10 以下版本，IndexedDB 不可用，需要降级使用 localStorage 或提供在线提示，据工信部数据，目前移动端和桌面端的主流浏览器对 IndexedDB 的支持率已超过 95%。

最佳实践建议

1. 始终使用事务：不要尝试在没有事务的情况下修改数据，这会导致不可预知的错误。
2. 合理设置索引：避免为所有字段创建索引，索引会增加写入开销并占用存储空间，只为核心查询字段创建索引。
3. 处理版本升级：在升级数据库版本时，确保 onupgradeneeded 回调中的操作是幂等的，避免重复创建对象存储或索引。
4. 监控存储空间：通过 navigator.storage.estimate() 监控剩余存储空间，当空间不足时，提示用户清理数据或卸载应用。

HTML5创建本地数据库常见问题解答

HTML5创建本地数据库有哪些主流方案对比

目前主流的本地存储方案包括 localStorage、sessionStorage 和 IndexedDB，localStorage 和 sessionStorage 基于键值对，操作简单，但容量小且同步阻塞，适合存储少量配置信息或会话状态，IndexedDB 基于对象存储，异步非阻塞，容量大且支持复杂查询，适合存储大量业务数据，对于需要离线同步的场景，PouchDB 或 RxDB 等基于 IndexedDB 封装的库是更优选择。

HTML5创建本地数据库支持离线应用开发吗

完全支持,IndexedDB 是构建离线优先（Offline-First）Web 应用的核心技术之一，结合 Service Worker，开发者可以在网络断开时从 IndexedDB 读取数据并继续提供服务，在网络恢复后自动同步数据，这种架构极大地提升了应用的可用性和用户体验，是 PWA 标准的重要组成部分。

HTML5创建本地数据库在移动端性能如何

在移动端,IndexedDB 的性能表现优异，由于采用异步 API，它不会阻塞 UI 线程，确保应用流畅运行，尽管移动设备的存储空间和计算能力有限，但 IndexedDB 经过底层优化，能够高效处理数万甚至数百万条记录，对于大多数移动 Web 应用而言，IndexedDB 是存储本地数据的最佳选择，其性能远超 localStorage。