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 等技术)
说明
官方提供了不少示例可以方便的查看学习
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
2022-01-13 使用网络classloader 实现业务功能动态修改加载
2021-01-13 pg_stat_monitor pg_stat_statements 的增强扩展
2021-01-13 Replication Between PostgreSQL Versions Using Logical Replication
2020-01-13 几个不错的gc viewer tools
2019-01-13 goreplay 输出流量捕获数据到 elasticsearch
2019-01-13 goreplay 镜像nginx web app流量