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

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

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)

示例（添加用户）：

标签： javascript java 浏览器 app 工具 ai 浏览器端