web 多屏互动显示方案

最新推荐文章于 2023-07-01 16:14:54 发布

qq_29331611

最新推荐文章于 2023-07-01 16:14:54 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_29331611/article/details/84560130

本文探讨了前端开发中两种常见的数据交互技术：基于localstorage的信息传递和websocket应用。localstorage提供了一种简单的方法来存储和读取客户端数据，适用于同一浏览器内的信息共享；而websocket则实现了全双工的通讯协议，适合于实时数据交换和跨终端互动，如案例中的手机与PC端互动游戏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 基于 local storage 实现的信息传递
相关插件 lsbridge.js https://github.com/krasimir/lsbridge 且项目中有非常简单易懂的示例
你需要了解的一些关于LocalStorage的特性：
只有相同域名的页面才能互相读取 LocalStorage
每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）
LocalStorage 永久有效，除非用户主动清理缓存
localStorage只能存String类型的字符串

这种方案简单易用，且不需要后端的支持，但无论前端是使用哪种本地存储方式，都只能基于统一浏览器中使用，并且在某些数据量较大的可视化项目中这种方式其实不太适用，如果需要跨终端互动或者大数据量支持，则可以使用websocket实现。

2 websocket

关于websocket 的资料已经很多，这里就不多介绍。需要注意的问题就是做好用户控制。

已有案例： http://stage.moneplus.cn/ice/ ，手机扫描左上方二维码进入，摇动手机模拟冰块掉落，在pc 上面的杯子接入掉落的冰块