web 多屏互動顯示方案

大侯發表於2019-02-16

1 基於 local storage 實現的資訊傳遞
相關外掛 lsbridge.js https://github.com/krasimir/l… 且專案中有非常簡單易懂的示例
你需要了解的一些關於LocalStorage的特性:
只有相同域名的頁面才能互相讀取 LocalStorage
每個域名 localStorage 最大儲存量為 5Mb 左右(每個瀏覽器不一樣)
LocalStorage 永久有效,除非使用者主動清理快取
localStorage只能存String型別的字串

這種方案簡單易用,且不需要後端的支援,但無論前端是使用哪種本地儲存方式,都只能基於統一瀏覽器中使用,並且在某些資料量較大的視覺化專案中這種方式其實不太適用,如果需要跨終端互動或者大資料量支援,則可以使用websocket實現。

2 websocket

關於websocket 的資料已經很多,這裡就不多介紹。需要注意的問題就是做好使用者控制。

已有案例: http://stage.moneplus.cn/ice/ ,手機掃描左上方二維碼進入,搖動手機模擬冰塊掉落,在pc 上面的杯子接入掉落的冰塊

相關文章