当前位置：首页 > 行业动态 > 正文

html5离线数据库

admin
行业动态
2025-05-05
3619

HTML5离线数据库（如IndexedDB）支持浏览器端数据持久化存储，具备NoSQL特性，可处理复杂结构化数据，兼容LocalStorage键值存储，突破同源限制，实现PWA离线应用数据

HTML5 IndexedDB 详解

基本概念

IndexedDB 是 HTML5 提供的浏览器端本地数据库解决方案，允许在用户浏览器中存储大量结构化数据（可超过 50MB），它支持异步 API、事务操作，并允许创建多表结构,适合离线应用或需要持久化存储的场景。

核心特性

特性	说明
持久化存储	数据长期保存，即使关闭浏览器或重启设备也不会丢失
结构化数据	支持类似 SQL 的键值对存储，可定义主键、索引
异步操作	所有操作通过 `Promise` 或回调函数处理，避免阻塞主线程
事务支持	支持读/写事务，保证数据一致性
容量限制	通常上限为 500MB（不同浏览器可能有差异）

操作流程

打开数据库

html5离线数据库第1张

const request = indexedDB.open('myDatabase', 1);
request.onerror = (event) => {
  console.error('数据库打开失败');
};
request.onsuccess = (event) => {
  const db = event.target.result; // 获取数据库实例
};
request.onupgradeneeded = (event) => { // 首次创建或版本升级时触发
  const db = event.target.result;
  db.createObjectStore('users', { keyPath: 'id' }); // 创建对象仓库
};

数据增删改查

const db = / 已打开的数据库实例 /;
// 添加数据（事务操作）
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.add({ id: 1, name: 'Alice' });
transaction.oncomplete = () => {
  console.log('数据写入成功');
};
// 查询数据
const request = store.get(1);
request.onsuccess = (event) => {
  console.log(event.target.result); // 输出 { id: 1, name: 'Alice' }
};

版本升级
修改数据库版本号时，onupgradeneeded 事件会触发,可在此迁移数据或修改对象仓库结构。

与其他存储对比

存储方式	IndexedDB	LocalStorage	Cookies
数据类型	结构化（支持索引、事务）	键值对（仅字符串）	键值对（仅字符串）
容量限制	500MB 左右	5~10MB	4KB
API 复杂度	高（需管理事务、对象仓库）	低（直接读写）	低（直接读写）
适用场景	离线应用、大数据存储	简单配置、临时数据	用户标识、会话状态