如何实现标签页数据同步？

为什么需要在标签页实现数据同步？

比如我写的这个今日掘友分油猴插件，有一个签到/抽奖状态。若在任意一个页面上进行过签到，其它页面也需展示已签到/抽奖，不需要再刷新页面。

再比如掘友分的完成进度。现在的方案是定好间隔时间发送请求查询完成进度。有了标签页数据同步，只要活动标签页中有完成涨分的行为，就同步通知到其它标签页。

如何实现数据同步？

例如使用vuex来管理需要同步的数据时，需要将数据同步保存至localStorage中。

vuex在commit一个修改时，需要同步修改localStorage中的数据。

同一个源的页面可以访问相同的localStorage的数据。

每个页面(标签)都开启对localStorage数据变化的监听window.addEventListener('storage', e => console.log(e))。

storage事件

1. 本页面的数据修改，本页面不会触发监听事件，其它页面可以监听到。
2. 不会监听sessionStorage数据的修改。
3. 同一个key,设置相同的值，并不会触发监听事件。
4. 修改，设置，删除都会触发事件。

页面数据同步流程

1. 新开标签页，先读取localStorage中的数据，将其保存到vuex中。
2. 开启storage事件监听。
3. 有任何页面状态的数据修改，同步到localStorage中。
4. 其它同源页面会触发storage事件的监听，将数据修改提交到vuex中。