基于localStorage实现客户端跨页面数据同步

问题背景

浏览器端, 同域情况下, 实现多个页面\窗口\iframe间的数据同步及通知

应用举例: 在其中一个页面退出登录后, 剩余所有页面自动跳转登录页.

核心原理

localStorage存储是基于单个域的, 统一域内的数据可以实现相互共享; 在其中一个页面更新数据后, 另外一个页面可以读取到该数据, 进而实现数据同步;

window对象的Storage Event消息, 可以实现在localStorage的某个值变化的时候, 以事件+回调的形式实现变化监听, 进而在别的页面更新数据后本页面能够及时感知

举例

<div id="test">测试</div>

let div = document.getElementById('test');
  div.addEventListener('click', function(){
    localStorage.setItem('test', Date.now());
  });

  //监听消息
  window.addEventListener('storage', function(e){
    console.log(e);
    console.log(localStorage.getItem('test'));
  });

事件样例

StorageEvent举例: {
  isTrusted : true,
	bubbles : false,
	cancelBubble : false,
	cancelable : false,
	composed : false,
	currentTarget : Window {window: Window, self: Window, document: document, name: '', location: Location, …},
	defaultPrevented : false,
	eventPhase : 0,
	key : "test",
	newValue : "1703042004763",
	oldValue : "1703042004305",
	returnValue : true,
	srcElement : Window {window: Window, self: Window, document: document, name: '', location: Location, …},
	storageArea : Storage {file_download: '3', js_book_type: '1', …},
	target : Window {window: Window, self: Window, document: document, name: '', location: Location, …},
	timeStamp : 38469.79999999888,
	type : "storage",
	url : "http://127.0.0.1:8080/localStorage.html",
    }

方案局限性

二进制数据, 需要序列化成string存储

不适合大量数据的同步

优点

足够简单, 易封装