IndexedDB 是浏览器端最强大、适合结构化数据存储的持久化方案，支持事务、索引与大量异步数据操作。需通过 indexedDB.open() 创建/打开数据库，在 upgradeneeded 中建对象仓库和索引；CRUD 操作须在事务中进行，推荐用 Promise 封装提升可读性；可 close() 关闭或 deleteDatabase() 删除数据库。
JavaScript 中实现数据持久化，IndexedDB 是浏览器端最强大、最适合结构化数据存储的方案。它支持事务、索引、大量数据（通常几百 MB 甚至更多，取决于浏览器和磁盘空间），且是异步 API，不会阻塞主线程。
创建并打开数据库
使用 indexedDB.open() 打开或新建数据库。首次调用会触发 upgradeneeded 事件，必须在此事件中创建对象仓库（Object Store）和索引。
示例：
const request = indexedDB.open('myAppDB', 2); // 版本号为 2request.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)
示例（添加用户）：
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));}
关闭与删除数据库
页面关闭前可调用 db.close() 主动释放连接（非必须，但有助于资源管理）。删除整个数据库用 indexedDB.deleteDatabase('dbName')，同样会触发 blocked 事件（如有其他标签页正打开该库）。
注意：deleteDatabase 是异步操作，需监听 success 和 error。
以上就是javascript如何实现数据持久化_IndexedDB怎样操作的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544317.html
微信扫一扫 
支付宝扫一扫 
