IndexedDB-极速本地存储：浏览器中的超级数据库
IndexedDB-极速本地存储：浏览器中的超级数据库
IndexedDB-极速本地存储：浏览器中的超级数据库
前言
在当今的网络应用开发领域，数据的存储与处理扮演着核心角色。随着应用功能的不断扩展，传统的数据存储方法，例如 Cookies 和 LocalStorage，开始显得力不从心。此时，IndexedDB以其作为浏览器端的高效结构化数据存储接口，开始成为开发者的新宠。它提供了一种更加强大和灵活的方式来管理和存储大量数据，以支持现代Web应用的需求。
IndexedDB 简介
IndexedDB是一种客户端的数据库技术，它允许网页应用在用户的浏览器上本地存储大量数据。这种技术使得数据可以被高效地以键值对的形式组织和检索，而不需要通过互联网与远程服务器进行交互。通过IndexedDB，开发者可以创建一个持久化的数据存储，用于缓存、离线访问或者任何需要在用户设备上直接处理数据的场景。
存储解决方案比较
Web开发中，我们有三种核心的API来在浏览器中管理数据存储：
Cookies
这是一种在浏览器中保存数据的方式，每个Cookie的大小被限制在4KB以内。通常，服务器在响应请求时会通过一个SET-COOKIE的头部信息来告诉浏览器存储某个键值对。当浏览器再次向服务器发起请求时，会自动携带这些Cookie，帮助服务器识别用户会话。但要注意，Cookies通常设置为HTTP-Only，这意味着它们不能被客户端脚本访问，因此它们并不适合用来存储需要在客户端访问的离线数据。
LocalStorage 和 SessionStorage
这两种是浏览器内置的键值存储方式，每个存储项可以有高达5MB的空间。LocalStorage存储的数据会保留直到被明确删除，而SessionStorage则在浏览器关闭时自动清除数据。两者的API操作基本相同，例如，可以使用window.localStorage.setItem("Key", "Value")来存储数据，使用window.localStorage.getItem("Key")来检索数据。不过，LocalStorage的API是同步的，频繁使用可能会阻塞浏览器的其他操作。
IndexedDB
这是一个功能强大的浏览器内嵌数据库，它没有存储空间的限制，并且支持异步数据访问，这使得它非常适合处理复杂数据操作，而不会对浏览器的渲染和其他操作造成阻塞。在这些存储选项中，LocalStorage更适合处理简单的数据操作和存储小量数据。而对于需要处理更复杂数据或需要异步访问数据的场景，IndexedDB往往是更合适的选择。
浏览器兼容性
方法封装
安装idb工具类
yarn add idb
封装的增删改查接口
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 pageSize = 10000;
const page = 1;
const db = await this.dbPromise;
const tx = db.transaction('users', 'readonly');
const store = tx.objectStore('users');
const allUsers = await store.getAll();
// 模糊查询
const filteredUsers = allUsers.filter(user =>
user.name.toLowerCase().includes(query.toLowerCase())
);
const total = filteredUsers.length;
const pageCount = Math.ceil(total / pageSize);
// 分页
const paginatedUsers = filteredUsers.slice(
(page - 1) * pageSize,
page * pageSize
);
return {
total,
data: paginatedUsers,
pageCount
};
}
}
export default new IndexedDBService('my-database', 'users');
方法使用
//列表带查询分页
const list = async (search = '') => {
const data = await IndexedDBService.getAllUsers(search)
}
//新增
const add = async () => {
const newItem = { id: '随机id', name: '名称',
await IndexedDBService.addUser(newItem)
}
//修改
const update = async (id) => {
const data = await IndexedDBService.getUser(id)
data.name = '123123'
await IndexedDBService.updateUser(data)
}
//删除
const deleteItem = async (id) => {
await IndexedDBService.deleteUser(id)
}
运行结果如下
总结
IndexedDB是现代Web应用中的核心本地数据存储解决方案，它突破了传统存储方法在容量和性能上的局限，为开发者提供了强大的数据管理能力。通过IndexedDB，开发者能够构建复杂的数据模型，实现高效的数据查询和检索，满足多样化的应用需求。无论是离线应用还是渐进式Web应用（PWA），IndexedDB的灵活性和高效性都使其成为构建现代Web应用的关键工具。IndexedDB的异步操作模式不仅优化了用户体验，还确保了应用的流畅运行。虽然它的学习难度可能略高于LocalStorage，但其所提供的丰富功能和扩展性是极具价值的。对于需要处理大量数据的Web应用而言，IndexedDB是一个理想的选择。随着Web技术的不断进步，IndexedDB有望在更广泛的应用场景中发挥其潜力，为用户提供更加丰富和高效的交互体验，同时为数据管理带来更高的效率。