javascript如何实现数据持久化_IndexedDB怎样操作-js教程-PHP中文网

javascript如何实现数据持久化_IndexedDB怎样操作

夜晨

发布： 2025-12-20 13:24:08

原创

715人浏览过

IndexedDB 是浏览器端最强大、适合结构化数据存储的持久化方案，支持事务、索引与大量异步数据操作。需通过 indexedDB.open() 创建/打开数据库，在 upgradeneeded 中建对象仓库和索引；CRUD 操作须在事务中进行，推荐用 Promise 封装提升可读性；可 close() 关闭或 deleteDatabase() 删除数据库。

javascript如何实现数据持久化_indexeddb怎样操作

JavaScript 中实现数据持久化，IndexedDB 是浏览器端最强大、最适合结构化数据存储的方案。它支持事务、索引、大量数据（通常几百 MB 甚至更多，取决于浏览器和磁盘空间），且是异步 API，不会阻塞主线程。

创建并打开数据库

使用 indexedDB.open() 打开或新建数据库。首次调用会触发 upgradeneeded 事件，必须在此事件中创建对象仓库（Object Store）和索引。

示例：

const request = indexedDB.open('myAppDB', 2); // 版本号为 2

request.onerror = () => console.error('打开失败：', request.error);
request.onsuccess = () => {
  const db = request.result;
  console.log('数据库已就绪');
};

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // 如果版本从 1 升到 2，可新增对象仓库或添加索引
  if (!db.objectStoreNames.contains('users')) {
    const store = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
    store.createIndex('byEmail', 'email', { unique: true });
  }
};

登录后复制

增删改查数据（CRUD）

所有操作需在事务（IDBTransaction）中进行。事务自动提交，无需手动 commit；但若未发生错误，事务会在所有请求完成时隐式提交。

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

添加数据：用 add()（主键冲突报错）或 put()（覆盖写入）
读取单条：用 get(key) 或 getKey(key)
按索引查询：用 index.get(value)，如 usersIndex.get('user@example.com')
范围查询/遍历：用 openCursor() 或 getAll()（注意：后者不支持过滤，仅限现代浏览器）
删除：用 delete(key)

示例（添加用户）：

Change Style AI

多风格照片生成器！AI生成30种照片

167

查看详情

function addUser(db, userData) {
  const tx = db.transaction('users', 'readwrite');
  const store = tx.objectStore('users');
  const request = store.add(userData);

  request.onsuccess = () => console.log('用户已保存');
  request.onerror = () => console.error('保存失败：', request.error);
}

登录后复制

处理异步与错误

IndexedDB 全部基于事件回调（也可用 Promise 封装）。务必监听 error 和 abort 事件，尤其在事务中——事务内任意请求出错，整个事务会自动中止（abort）。

推荐封装成 Promise 工具函数提升可读性，例如：

function promisifyRequest(request) {
  return new Promise((resolve, reject) => {
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

// 使用示例
async function getUserById(db, id) {
  const tx = db.transaction('users', 'readonly');
  const store = tx.objectStore('users');
  return await promisifyRequest(store.get(id));
}

登录后复制