简单介绍下应用场景：
一、大规模数据存储与缓存
- 电商场景：存储商品目录、用户购物车及订单历史，减少服务器压力并提升加载速度。
- 新闻/阅读类应用：缓存文章内容及用户阅读记录，实现离线访问。
- 数据可视化工具：本地处理海量数据，支持离线分析并延迟同步至服务器。
二、用户生成内容管理
- 实时保存草稿：适用于在线文档、图片编辑器等场景，确保编辑过程中数据自动持久化。
- 游戏与教育应用：存储用户游戏进度、成就或学习记录，实现跨会话数据保留。
indexDB的基础应用：
一、核心概念与架构
-
数据库（Database）
- 每个源（域名）可创建多个数据库，但通常一个应用使用一个数据库。
- 数据库通过名称和版本号唯一标识，版本升级需显式处理。
-
对象存储（Object Store）
- 类似数据库的"表"，存储键值对数据。
- 每个对象存储需定义主键（
keyPath），支持自动生成主键（autoIncrement）。 - 可创建多个索引（Index），用于快速查询非主键字段。
-
事务（Transaction）
-
所有数据操作必须在事务中完成，确保原子性。
-
事务模式：
readonly：只读，性能最佳。readwrite：读写，可能触发版本升级。versionchange：数据库结构变更（如创建/删除对象存储）。
-
-
游标（Cursor）
- 用于遍历对象存储或索引中的数据，支持范围查询和条件过滤。
二、操作流程详解
1. 打开/创建数据库
ini
const request = indexedDB.open('myDatabase', 2); // 名称 + 版本
request.onerror = (event) => {
console.error('数据库打开失败:', event.target.error);
};
request.onsuccess = (event) => {
const db = event.target.result;
console.log('数据库已打开:', db.name);
};
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains('users')) {
const store = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
store.createIndex('nameIndex', 'name', { unique: false });
store.createIndex('emailIndex', 'email', { unique: true });
}
};- 版本管理 ：每次结构变更（如新增对象存储）需升级版本，
onupgradeneeded是唯一可修改结构的地方。 - 错误处理 ：监听
onerror事件处理数据库操作中的异常。
2. 数据操作（CRUD）
添加数据
ini
const transaction = db.transaction('users', 'readwrite');
const store = transaction.objectStore('users');
const request = store.add({ name: 'Alice', email: '[email protected]' });
request.onsuccess = () => console.log('数据添加成功');
request.onerror = (e) => console.error('添加失败:', e.target.error);读取数据
ini
const transaction = db.transaction('users', 'readonly');
const store = transaction.objectStore('users');
const request = store.get(1); // 主键查询
request.onsuccess = (e) => {
const data = e.target.result;
console.log('获取数据:', data);
};更新数据
php
const request = store.put({ id: 1, name: 'Alice Updated', email: '[email protected]' });删除数据
go
const request = store.delete(1); // 按主键删除使用索引查询
ini
const index = store.index('nameIndex');
const request = index.get('Alice');三、事务与并发控制
- 事务生命周期 ：事务在回调函数执行完毕后自动提交，或手动调用
transaction.commit()。 - 并发冲突：若两个事务同时修改同一数据，后提交的事务可能失败，需通过重试或版本管理解决。
- 事务模式选择 ：优先使用
readonly提升性能，必要时用readwrite。
五、实际应用场景与示例
场景1：离线应用缓存
- 使用Service Worker拦截网络请求，优先从IndexedDB读取缓存数据。
- 示例代码：
javascript
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request).then((res) => {
// 将响应数据存入IndexedDB
return res;
});
})
);
});场景2：大文件存储
- 存储用户上传的图片或文档（Blob类型）。
- 示例：
ini
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
const file = e.target.files;
const transaction = db.transaction('files', 'readwrite');
const store = transaction.objectStore('files');
store.add(file, file.name); // 使用文件名作为主键
});六、对比其他存储方案
| 特性 | IndexedDB | LocalStorage | Web SQL (已废弃) | Cookies |
|---|---|---|---|---|
| 存储容量 | ≥250MB（浏览器策略限制） | ~5MB | ~5MB | ~4KB |
| 数据格式 | 结构化对象/Blob | 字符串 | 关系型表格 | 字符串 |
| 查询能力 | 索引、游标、范围查询 | 无 | SQL查询 | 无 |
| 异步支持 | 是 | 否（同步阻塞） | 是 | 否 |
| 适用场景 | 大规模数据、复杂查询 | 简单配置/状态存储 | 小型结构化数据（历史） | 会话/身份标识 |
总结：
IndexedDB 是浏览器提供的 客户端 NoSQL 数据库，支持存储大规模结构化数据（如 JSON、Blob），通过异步事务操作和索引查询实现高效数据管理，适用于离线应用、大文件缓存等场景，提供远超 LocalStorage 的存储容量（GB 级）和复杂检索能力，是前端处理高性能、持久化数据的核心方案。