使用前端缓存LocalSotorage导致的现场Bug

上周我们开始开发一款简易版的的底图开发工具BaseMap，就临时数据存储我们做了做了一些优化。

我们这个工具目前没有开发临时的后台，所以只能借用webStorage或者浏览器IndexDB类似的方案，比如容易想到的是webStorage分为sessionStorage和localStorage：

• sessionStorage：生命周期为当前窗口或者标签，不同浏览器窗口不能共享，浏览器关闭缓存删除
• localStorage:可以在相同浏览器同域标签下共享数据，浏览器关闭数据依然持久化存在

跟我业务需求来讲，底图工具的历史缓存是一个重要功能，但是对于缓存数据的数量来讲不需要很多，仅限制于个人绘制的主动存储。

所以我们选择了localStorage实现我们的历史缓存功能，5M大小完全满足我们的需求。

实现缓存的所以功能点：

• 用户可以手动点击保存主动缓存
• 当标签关闭/刷新页面会自动存储，侦听window.beforeunload()事件
• 当前页面为空不会缓存
• 当我们查看历史缓存的时候，可以重新应用缓存对象
• 缓存状态提示
• 设置了缓存数据数目，自动存储和用户存储各 100条数据，超过会自动移除最早存储数据（测试存储200条数据缓存）
• 删除全部缓存

今天用户在使用的时候出现了现场bug，浏览器存储出现:

问题分析：

• 浏览器分配给localStorage大小不够新的数据存储
• 自动存储一些不重要的页面数据加速了localStorage的占用
• 全部删除功能目前不够实用，现场每个页面节点数在500+，一般不可能实用全部删除功能清除已经摆放的控件
• 自测阶段节点数较少导致问题被掩盖

思路：我们的存储功能是现场已经使用并且经常使用到的功能，出现问题是因为我们的交互和容错处理没有优化，我们可以通过判断当前localStorage大小提供判断已经，提供更加友好的提示功能。

• 当前对象的大小：

encodeURIComponent(JSON.stringify(localStorage)).length;

• localStorage剩余大小：

1024 \* 1024 \* 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length

问题处理：

• 根据localStorage（我们使用Chrome）的占用判断，提示保存状态
• 增加根据下标删除单条历史数据的功能
• 删除自动存储功能，减少无用数据，但是保留旧的数据字段，容错线程已经存储在自动存储的数据
• 页面刷新或者离开，增添提示保存功能

后续处理：localStorage仅是一个数据缓存的临时性方法，除了不能解决大数据存储的问题，也不能处理多浏览器多账号多设备的数据共享和数据持久化问题，如果要彻底解决这个问题，后续需要重构成后台存储的一劳永逸的完整方案。