本人是通过实践完成的这篇。这篇文章仅仅是引导性文章。
项目场景:
提示:性能优化之localstorage的大容量导致加载变慢:
例如:我负责一个项目,原先的数百条数据是存储在localstorage里面,但是localstorage容量标准是5MB
问题描述:
问题:我负责的项目localstorage存储的数据量太大,高达200+条。而且每条数据很长,所以每次页面加载/更新慢的让人受不了
原因分析:
原因:localstorage容量标准是5MB,我负责的项目原先的存储在localstorage的数据量太大,导致性能低下。解决方案:
我的解决方案是:
之前是通过localstorage.setitem(value),获取的时候是通过getitem()获取数据。
我现在的解决方法是定义一个全局函数,通过接口返回数据。在全局写一个全局函数,然后返回数据,获取数据的时候调用全局函数,把整个项目的这部分进行重构也是一个简单的事情了。
关于代码就不能放了。思路知道其实就好了。
测试:
- 比如在原先的基础上再增加一倍,两倍,三倍的数据,你看下加载时间。
- 计算localstorage的容量:
let size = 0
for(item in window.localStorage) {
if(window.localStorage.hasOwnProperty(item)) {
size += window.localStorage.getItem(item).length;
}
}
console.log(size / 1024)