IndexedDB通过增删改查操作实现浏览器端大量结构化数据存储。首先打开数据库并创建对象仓库；接着使用事务添加数据；然后可按主键查询或遍历所有数据；支持获取记录后更新字段；还能根据主键删除指定数据，适用于离线应用与大数据处理场景。
HTML5 提供了多种客户端存储方式，其中 IndexedDB 是一种强大且灵活的低级 API，用于在用户浏览器中存储大量结构化数据，包括二进制数据（如图片、文件等）。它适合需要离线功能或处理大量数据的 Web 应用。下面介绍如何使用 IndexedDB 实现增删改查操作。
1. 打开数据库并创建对象仓库
在使用 IndexedDB 之前，必须先打开数据库并定义一个对象仓库（类似表）来存储数据。
const request = indexedDB.open('MyDatabase', 1);let db;request.onupgradeneeded = function(event) { db = event.target.result; // 创建名为 users 的对象仓库，主键为 id if (!db.objectStoreNames.contains('users')) { db.createObjectStore('users', { keyPath: 'id', autoIncrement: true }); }};request.onsuccess = function(event) { db = event.target.result;};request.onerror = function(event) { console.error('数据库打开失败:', event.target.error);};
2. 添加数据（增）
使用事务将新记录插入到对象仓库中。
function addUser(name, email) { const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); const user = { name, email }; // id 会自动递增 const addRequest = store.add(user); addRequest.onsuccess = function() { console.log('用户添加成功，ID:', addRequest.result); }; addRequest.onerror = function() { console.error('添加失败:', addRequest.error); };}// 使用示例addUser('张三', 'zhangsan@example.com');
3. 查询数据（查）
支持按主键查询单条数据，或遍历所有数据。
立即学习“前端免费学习笔记（深入）”；
// 按 ID 查询单个用户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 为', id, '的用户'); } };}// 查询所有用户function getAllUsers() { const transaction = db.transaction(['users'], 'readonly'); const store = transaction.objectStore('users'); const request = store.getAll(); request.onsuccess = function() { console.log('所有用户:', request.result); };}// 使用示例getUserById(1);getAllUsers();
4. 更新数据（改）
通过主键找到记录并更新其内容。
function updateUser(id, name, email) { const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); const request = store.get(id); request.onsuccess = function() { const user = request.result; if (user) { user.name = name; user.email = email; const updateReq = store.put(user); // 保存更新 updateReq.onsuccess = () => console.log('更新成功'); } else { console.log('用户不存在'); } };}// 使用示例updateUser(1, '李四', 'lisi@example.com');
5. 删除数据（删）
根据主键删除指定记录。
function deleteUser(id) { const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); const request = store.delete(id); request.onsuccess = function() { console.log('用户删除成功'); }; request.onerror = function() { console.error('删除失败:', request.error); };}// 使用示例deleteUser(1);
基本上就这些。IndexedDB 虽然 API 较为复杂，但功能强大，适用于需要持久化存储和高性能查询的场景。掌握它的基本增删改查操作是开发离线 Web 应用的重要一步。
以上就是HTML5代码如何管理客户端存储 HTML5代码中IndexedDB的增删改查的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1594629.html
微信扫一扫 
支付宝扫一扫 
