localStorage 存满了怎么办？

背景

业务中使用 localStorage 出现爆了的情况，这时就要考虑是把之前的数据丢弃还是选择其他容量更大的本地存储方案，想到用的是 IndexDB 做替代方案，但是 IndexDB 操作 api 比较多，需要学习成本，为了节省组内成员的学习成本，调研了一下 IndexDB 的使用和 IndexDB 相关库，最终选择了 localForage。

IndexDB基本使用相关文档：

阮一峰 IndexedDB 入门教程
MDN IndexedDB API
IndexedDB API

IndexDB的缺点

indexDB 是异步的，而且页面刚开始加载， indexDB 启动需要一些时间，在一些低端机型上就很明显，可以存储一些不太重要的数据，涉及到首屏渲染的数据还是放 localStorage 里吧

相关的库：

1. localForage： github地址 官网地址

• 22k star
• 近一个月有commit
• npm 包大小：468kb

api 较少，类似 localstorage，上手较容易，localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。

2. Dexie.js： github地址 官网地址

• 9k star
• 近一个月有commit
• npm 包大小：2.58M
• 有对应的 hooks 包：dexie-react-hooks，npm 包 67kb

api 较多，有一定的学习成本，了解到这个库查询可能会快一点，存储的时候会建立索引

3. pouchdb github地址 官网地址

• 15k star
• 近一个月有commit
• npm 包大小：4.2M

三个包的工具对比

结论

从兼容性、学习成本和下载量以及库的维护状态，最后我选择了 localForage。