悠悠楠杉
网站页面
JS如何实现本地缓存——IndexedDB本地数据库使用详解
12/17
![]()
在现代Web开发中，本地数据存储是提升用户体验的关键技术之一。相较于localStorage和sessionStorage的简单键值存储，IndexedDB提供了更强大的本地数据库能力，支持结构化数据、事务操作和大容量存储（通常可达数百MB）。本文将深入解析IndexedDB的核心用法，带你从零实现一个完整的本地缓存方案。
一、IndexedDB基础概念
IndexedDB是一个基于事务的NoSQL数据库，核心特点包括：
- 异步操作：所有API均通过事件回调或Promise返回结果，避免阻塞主线程。
- 对象仓库（Object Store）：类似SQL中的表，用于存储结构化数据。
- 索引（Index）：支持通过非主键字段快速查询数据。
二、打开或创建数据库
使用indexedDB.open()方法初始化数据库，若不存在则会自动创建：
const request = indexedDB.open('MyDatabase', 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
// 创建对象仓库（类似表）
const store = db.createObjectStore('users', { keyPath: 'id' });
// 创建索引
store.createIndex('nameIdx', 'name', { unique: false });
};
request.onsuccess = () => {
console.log('数据库打开成功');
};三、增删改查操作
- 新增数据：通过事务向对象仓库写入数据。
const transaction = db.transaction('users', 'readwrite');
const store = transaction.objectStore('users');
store.add({ id: 1, name: 'Alice', age: 25 });- 查询数据：通过主键或索引获取数据。
const request = store.get(1);
request.onsuccess = () => {
console.log(request.result); // { id: 1, name: 'Alice', age: 25 }
};- 更新数据：使用
put()方法覆盖原有记录。
store.put({ id: 1, name: 'Alice', age: 26 });- 删除数据：通过主键移除记录。
store.delete(1);四、高级功能实战
场景：分页查询用户列表
结合索引和游标（Cursor）实现高效分页：
const index = store.index('nameIdx');
const request = index.openCursor();
let page = 1, pageSize = 5;
request.onsuccess = (event) => {
const cursor = event.target.result;
if (cursor && page === 1) {
console.log('当前页数据：', cursor.value);
if (--pageSize === 0) {
cursor.continue(); // 跳转到下一页
page++;
pageSize = 5;
}
}
};五、性能优化与注意事项
- 事务粒度：尽量缩小事务范围，避免长时间锁定数据库。
- 错误处理：监听
onerror事件处理异常。 - 版本迁移：在
onupgradeneeded中管理数据库结构变更。
结语
IndexedDB为前端提供了接近原生应用的存储能力，适合缓存复杂数据（如用户配置、离线应用数据）。掌握其核心API后，可结合Service Worker进一步构建离线优先的PWA应用。
