解决localstorage容量大导致页面加载变慢

Posted 2022-02-03 三水草肃

本人是通过实践完成的这篇。这篇文章仅仅是引导性文章。

项目场景：

提示：性能优化之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)