在前端留存一些状态,是在前端场景下提升性能的常规操作。最近我有一个场景需要在前端留存一个状态,借着这个机会,试了试 IndexedDB 来作为数据存储,拓展一下新的方向。
Chrome 在中提供了多种不同的存储,按下 F12 ,打开 DevTools ,找到应用 – 存储,你就会看到目前 Chrome 支持的多种存储方式。常用的主要就是本次存储空间(Local Storage)、会话存储空间(Session Storage)和 Indexed DB。这次我用的便是 Indexed DB。
由于 Indexed DB 提供的 API 整体比较裸,在实际应用开发时,可能并不好用,你可以根据自己的需要,选择使用不同的第三方开发库来开发你的应用。在这篇文章中,我使用了 idb-keyval 来作为我的开发库。
首先,使用 yarn add idb-keyval
来安装依赖,安装完成后,可以参考如下代码来在你的项目中引入 indexedDB.
import { set,get,keys } from 'idb-keyval';
// 下面演示了一个 get_books 函数,会将内容存储在 IndexedDB 的 your-keys 当中。
// 如果存在缓存,则直接使用缓存,不存在,则进行数据获取
function get_books(){
// 使用 keys 获取当前 IndexedDB 当中的所有 Key,用于判断当前是否有缓存结果。
const exists_keys = await keys();
if(exists_keys.indexOf('your-keys') !== -1){
console.log("use cached glossary")
return await get('your-keys');
}
// fetch data
let data = fetch_data();
await set('your-keys',data)
return data;
}
在性能上,使用 Indexed DB 之后,根据你的数据获取的难度,会有不同的性能提升。比如这里我不使用缓存,单次数据获取需要花费 800ms,借助于 Indexed DB,时间可以被控制在 10ms 以内,从而得到一个不错性能。