IndexedDB-极速本地存储：浏览器中的超级数据库
前言
在当今的网络应用开发领域，数据的存储与处理扮演着核心角色。
随着应用功能的不断扩展，传统的数据存储方法（如 Cookies 和 LocalStorage）已经逐渐无法满足复杂的需求。
此时，IndexedDB 作为浏览器端的高效结构化数据存储接口，成为了开发者的新宠。它为现代 Web 应用提供了强大且灵活的存储方式。
IndexedDB 简介
IndexedDB 是一种客户端的数据库技术，允许网页应用在用户的浏览器上本地存储大量数据。
IndexedDB 通过键值对的形式组织和检索数据，支持持久化存储，使得应用可以离线运行，缓存数据或本地处理复杂的数据操作。
IndexedDB 的强大之处在于它的异步操作，能够高效处理大量数据，而不会阻塞浏览器的渲染和其他操作。
存储解决方案比较
在 Web 开发中，我们常见的客户端数据存储 API 主要有三种：
1. Cookies
- 每个 Cookie 的大小限制为 4KB 以内。
- 服务器可以通过
Set-Cookie响应头告诉浏览器存储键值对，当浏览器再次访问服务器时会自动携带 Cookie。 - 缺点：Cookies 的存储空间有限，且对于离线访问的场景不适用。
2. LocalStorage 和 SessionStorage
- LocalStorage 可以持久化存储数据，SessionStorage 会在浏览器关闭时清除。
- 两者都支持 5MB 左右的数据存储，但其 API 是同步的，可能会阻塞页面渲染。
- 适用于简单的数据存储，但不适合存储大量结构化数据。
3. IndexedDB
- IndexedDB 没有存储空间的限制，支持异步访问，适合复杂的数据操作。
- 可以存储大型、结构化的数据，且通过索引提高检索速度。
- 非常适合需要持久化、异步、批量操作数据的场景。
浏览器兼容性
IndexedDB 是大多数现代浏览器支持的原生 API，主流浏览器如 Chrome、Firefox、Safari 都已全面支持 IndexedDB，适合大多数 Web 应用场景。
方法封装：安装并使用 idb 工具类
为了简化 IndexedDB 的使用，可以使用 idb 这个开源工具库，它封装了 IndexedDB 的底层操作。
1. 安装 idb
yarn add idb
2. 封装增删改查的接口
import { openDB } from 'idb';
class IndexedDBService {
constructor(dbName) {
this.dbPromise = openDB(dbName, 1, {
upgrade(db) {
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id' });
}
},
});
}
async addUser(user) {
const db = await this.dbPromise;
await db.add('users', user);
return user.id;
}
async getUser(id) {
const db = await this.dbPromise;
return await db.get('users', id);
}
async updateUser(user) {
const db = await this.dbPromise;
await db.put('users', user);
return 200;
}
async deleteUser(id) {
const db = await this.dbPromise;
await db.delete('users', id);
}
async getAllUsers(query = '') {
const db = await this.dbPromise;
const store = db.transaction('users', 'readonly').objectStore('users');
const allUsers = await store.getAll();
// 模糊查询
const filteredUsers = allUsers.filter(user =>
user.name.toLowerCase().includes(query.toLowerCase())
);
return {
total: filteredUsers.length,
data: filteredUsers,
};
}
}
export default new IndexedDBService('my-database');
3. 方法使用
获取用户列表（带查询功能）
const list = async (search = '') => {
const data = await IndexedDBService.getAllUsers(search);
console.log(data);
};
新增用户
const add = async () => {
const newItem = { id: Date.now(), name: '新用户' };
await IndexedDBService.addUser(newItem);
};
修改用户
const update = async (id) => {
const data = await IndexedDBService.getUser(id);
data.name = '修改后的名称';
await IndexedDBService.updateUser(data);
};
删除用户
const deleteItem = async (id) => {
await IndexedDBService.deleteUser(id);
};
运行结果
通过 IndexedDBService 封装的接口，我们可以轻松实现用户信息的增删改查操作，模拟离线或大型数据的处理。
总结
IndexedDB 是现代 Web 应用中的核心本地数据存储解决方案，它突破了传统存储方法在容量和性能上的局限，为开发者提供了强大的数据管理能力。
通过 IndexedDB，开发者可以构建复杂的数据模型，实现高效的数据查询和检索，满足离线应用或渐进式 Web 应用（PWA）的需求。
尽管 IndexedDB 的学习难度稍高于 LocalStorage，但它的丰富功能和高效性非常值得掌握，特别是对于需要处理大量数据的应用。随着 Web 技术的进步，IndexedDB 将在更多的场景中发挥其强大的数据存储能力。
