写在开头

为什么今天要写关于数据化的问题，其实是工作上遇到这样一个问题。

背景

之前作者在工作中接手一个老项目，我们暂且称其为A项目，在昨天突然发现有些用户点击B模块的详情页的时候，白屏并报错-JSON解析错误。

排查

• 排查相关逻辑，未发现有什么问题。并且最近无人上线。
• 排查接口，发现无问题
• 查看相关逻辑，发现数据会从localStorage里面拿，大概逻辑是如下图，发现白屏时存储的数据时不完整的

• 查看白屏时的localStorage的使用容量，发现使用容量超了5MB,不同浏览器的localStorage的容量是不同的，所以我们按5MB来做一个衡量标准。从这里可以推断出容量不够，导致写入的时候发生了json字符串的截断，导致详情页解析json失败，导致白屏。

解决

所以有两种方案：

• 更改详情页逻辑，从接口拿。这才是正常逻辑。
• 容量不够就换容量大的，或者扩容

因为改动比较大。而且没有qa，所以作者直接选择后者。但是长期规划是选第一种。

扩容

localStorage容量5MB是指在某域名下存储容量是5MB,那么扩容就增加域名，那怎么增加？，可以用iframe内嵌一个页面，前提是不同域名。然后通过postMessage传递数据，在这个域名下存储数据。但是没有合适的现有域名，而且这种方案太麻烦了。可读性和维护性不高。

换容量大的

容量大的话。当时脑子里就想到了indexDB，因为之前看某网站的时候，发现他们用indexDB做加载优化。 但是indexDB兼容性不好。

最终解决

由于该项目不是由作者维护了，所以是现有维护者换了一个indexDB的redux数据持久化的库。 感谢这位大佬。

写在最后

今天又是早下班的一天。7点下班，出公司大门发现天还没有黑。