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 等技术)

说明

官方提供了不少示例可以方便的查看学习

参考资料

https://github.com/jcubic/sysend.js

posted on 2023-01-13 17:09  荣锋亮  阅读(89)  评论(0编辑  收藏  举报

导航