IndexedDB是HTML5提供的浏览器内置数据库，用于存储大量结构化数据。它支持对象、数组、二进制等数据类型，采用异步API避免阻塞UI，具备事务机制与索引查询，适合离线应用和本地缓存场景。通过open()打开数据库，在onupgradeneeded中创建对象仓库和索引，所有增删改查操作在事务中进行。推荐使用idb或Dexie.js等库简化原生API的复杂性，并注意版本控制、错误处理与兼容性问题。掌握IndexedDB可显著提升Web应用的离线能力与性能表现。
在现代Web应用中，当需要在浏览器端存储大量结构化数据时，IndexedDB 是HTML5提供的强大解决方案。相比 localStorage 只能存储字符串，IndexedDB 支持存储对象、数组、二进制数据（如文件、Blob），适合处理复杂和大量的本地数据，比如离线应用、待同步数据、缓存等。
什么是 IndexedDB？
IndexedDB 是一种低层 API，用于在客户端存储大量结构化数据的浏览器内置数据库。它支持事务型操作、索引查询，并可在主线程外通过异步方式运行，避免阻塞页面。
特点包括：
支持结构化数据（对象、数组、日期、File、Blob 等） 异步 API，不阻塞 UI 支持事务机制，保证数据一致性 可创建索引，实现高效查询 容量较大（通常为几十MB到数GB，取决于浏览器和设备）
基本使用步骤
要使用 IndexedDB，需经历打开数据库、创建对象仓库、执行增删改查等操作。以下是关键流程的简明说明。
立即学习“前端免费学习笔记（深入）”；
1. 打开或创建数据库
使用 window.indexedDB.open() 打开数据库，如果不存在则会创建。
const request = indexedDB.open('MyAppDB', 1);
第二个参数是版本号，升级数据库结构时需递增版本号。
2. 创建对象仓库（Object Store）
在 onupgradeneeded 事件中定义数据表（即对象仓库）和索引。
request.onupgradeneeded = function(event) { const db = event.target.result; // 创建一个名为 'users' 的对象仓库，主键为 'id' if (!db.objectStoreNames.contains('users')) { const store = db.createObjectStore('users', { keyPath: 'id' }); // 添加索引，便于按姓名查找 store.createIndex('name', 'name', { unique: false }); }};
3. 增删改查操作（CRUD）
所有操作都在事务（transaction）中进行。
添加数据：
request.onsuccess = function(event) { const db = event.target.result; const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); store.add({ id: 1, name: 'Alice', email: 'alice@example.com' }); transaction.oncomplete = () => { console.log('数据已保存'); };};
读取数据：
const transaction = db.transaction(['users'], 'readonly');const store = transaction.objectStore('users');const getRequest = store.get(1);getRequest.onsuccess = function() { if (getRequest.result) { console.log('找到用户:', getRequest.result); } else { console.log('未找到该用户'); }};
使用索引查询：
const index = store.index('name');const search = index.get('Alice');search.onsuccess = () => { console.log('通过姓名查到:', search.result);};
更新数据：
store.put({ id: 1, name: 'Alice', email: 'newemail@example.com' });
删除数据：
store.delete(1);
封装与简化使用
原生 IndexedDB API 较为繁琐，建议在项目中使用封装库来提升开发效率。
idb：轻量级 Promise 封装，推荐使用 Dexie.js：功能丰富的高级封装，支持链式语法
例如使用 idb：
import { openDB } from 'idb';const db = await openDB('MyAppDB', 1, { upgrade(db) { db.createObjectStore('users', { keyPath: 'id' }); }});await db.add('users', { id: 1, name: 'Bob' });const user = await db.get('users', 1);
注意事项与最佳实践
始终监听 error 和 success 事件，及时处理异常 版本变更只能在 onupgradeneeded 中修改结构 事务在回调结束后自动关闭，不要跨异步操作使用 移动端和部分旧浏览器支持有限，注意兼容性（可查 caniuse.com） 敏感数据应加密后再存储
基本上就这些。IndexedDB 虽学习曲线略陡，但掌握后能显著提升 Web 应用的离线能力和性能表现。从简单的用户配置到复杂的本地数据管理，它都是值得投入的客户端数据库方案。
以上就是html5使用indexedDB存储大量结构化数据 html5使用客户端数据库的入门的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1587561.html
微信扫一扫 
支付宝扫一扫 
