IndexedDB是浏览器中用于存储大量结构化数据的客户端方案，支持异步操作、事务处理和索引查询。通过indexedDB.open()创建或打开数据库，在onupgradeneeded中定义对象仓库和索引。使用transaction进行读写操作，add()/put()添加或更新数据，get()读取，delete()删除，可通过索引高效查询。结合Promise封装可提升API易用性，适用于复杂前端离线应用。
IndexedDB 是浏览器提供的一种强大客户端存储方案，适合存储大量结构化数据，包括二进制内容。相比 localStorage，它支持异步操作、索引查询和事务处理，更适合复杂应用的数据管理。
创建数据库连接与初始化
使用 IndexedDB 第一步是打开或创建一个数据库。通过 indexedDB.open() 方法触发连接请求，若数据库不存在则自动创建。
示例代码：
let db; const request = indexedDB.open(“MyAppDB”, 1);
request.onupgradeneeded = function(event) { db = event.target.result; if (!db.objectStoreNames.contains(“users”)) { const objectStore = db.createObjectStore(“users”, { keyPath: “id”, autoIncrement: true }); objectStore.createIndex(“email”, “email”, { unique: true }); } }; request.onsuccess = function(event) { db = event.target.result; }; request.onerror = function(event) { console.error(“无法打开数据库”); };
说明： onupgradeneeded 在数据库首次创建或版本更新时触发，用于定义对象仓库（object store）和索引。
添加与读取数据
在获取数据库实例后，可通过事务进行数据的增删改查操作。写入数据使用 object store 的 add() 或 put() 方法。
立即学习“Java免费学习笔记（深入）”；
添加数据示例：
function addUser(name, email) { const transaction = db.transaction([“users”], “readwrite”); const store = transaction.objectStore(“users”); const user = { name, email }; const request = store.add(user); request.onsuccess = () => console.log(“用户添加成功”); request.onerror = () => console.error(“添加失败”); }
读取数据示例：
function getUserById(id) { const transaction = db.transaction([“users”], “readonly”); const store = transaction.objectStore(“users”); const request = store.get(id); request.onsuccess = function() { if (request.result) { console.log(“找到用户:”, request.result); } else { console.log(“未找到该ID用户”); } }; }
使用索引进行高效查询
当数据量较大时，通过索引可以快速定位记录，避免全表扫描。
function getUserByEmail(email) { const transaction = db.transaction([“users”], “readonly”); const store = transaction.objectStore(“users”); const index = store.index(“email”); const request = index.get(email); request.onsuccess = () => { if (request.result) { console.log(“通过邮箱找到用户:”, request.result); } }; }
注意： 索引需在 onupgradeneeded 中预先创建，否则无法使用。
更新与删除数据
更新数据使用 put() 方法，传入已有主键的对象即可覆盖原记录；删除使用 delete() 方法。
// 更新用户 function updateUser(id, newName) { const transaction = db.transaction([“users”], “readwrite”); const store = transaction.objectStore(“users”); const getRequest = store.get(id); getRequest.onsuccess = function() { const user = getRequest.result; user.name = newName; store.put(user); }; } // 删除用户 function deleteUser(id) { const transaction = db.transaction([“users”], “readwrite”); const store = transaction.objectStore(“users”); store.delete(id); }
基本上就这些。掌握连接管理、事务使用和索引查询，就能在前端实现较复杂的离线数据操作。虽然 API 略显繁琐，但结合 Promise 封装后可大幅提升可用性。
以上就是如何利用JavaScript的IndexedDB进行客户端数据存储？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/17057.html
微信扫一扫 
支付宝扫一扫 
