“多页面间数据同步”深入

[liujiusheng]

有时同时打开了多个标签页，在多个标签页上都可以进行数据操作，而这一份数据存储由于多页面共享的需要存储在localStorage中，此时我们有两种方案保证多页面间的数据一致性： 1.使用onstorage事件监听，相当于当数据更新到localStorage中的时候做一次全局广播，相应的页面接收到广播后各自处理页面刷新即可。 2.使用visibilitychange方案，数据还是更新到localStorage中，只是更新后不广播，只有在需要使用的标签页激活时再重新获取数据刷新页面。

localStorage方案： onstorage事件：Chrome 下必须由其他页面触发。IE,Firefox 可以本页面触发。（本以为可以用于多标签页间数据同步，结果只能其它） visibilitychange事件：

document.addEventListener('visibilitychange', function() {
     console.log(222);
});

document.visibilityState：表示下面 4 个可能状态的值 hidden：页面在后台标签页中或者浏览器最小化 visible：页面在前台标签页中 prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true unloaded：页面正在从内存中卸载

在angular这种双向绑定的页面中可能需要$scope.$apply();手动刷新一下，因为Angular基于事件绑定，它并没有监听到onstorage事件