sysend.js 跨浏览器tabs 同步类库
sysend.js 提供了跨浏览器tabs 数据同步的能力,利用了不少浏览器的特性 (localstoreage api 以及broadcastchannel api)
参考使用
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>learning api</title>
<script src="https://unpkg.com/sysend@1.15.0/sysend.js"></script>
</head>
<body>
<input id="input" autocomplete="off" />
<script>
sysend.on('input', text => {
input.value = text;
});
input.addEventListener('input', () => {
sysend.broadcast('input', input.value);
});
document.querySelector('#origin').innerHTML = location.origin;
</script>
</body>
</html>
- 效果
打开多个页签我们就能看到效果(注意无痕模式是不支持的,机制以及数据共享的问题)
使用场景
比如我们的业务具有特殊性,不能同时开通多个页签,或者开通多个页签对于同一个表单数据只能有一个进行操作,或者
多个页签需要进行数据同步,或者进行一个基于iframe 技术的数据实时同步,这些场景都是比较有用的,直接利用了客户端
的特性,不需要其他复杂的server 端消息同步机制(websocket,或者sse 等技术)
说明
官方提供了不少示例可以方便的查看学习