優雅且低實作成本的瀏覽器跨分頁同步方案 — LocalStorage

瀏覽器上開著大量分頁對大多數人來說是家常便飯的一件事,所以有些網站考慮到這點,會做到在不同分頁的情況下也能讓同 1 個網頁即時同步,保證使用者在 A 分頁操作完之後,跳回 B 分頁還是看到相同的結果。

說到這種即時同步的功能怎麼做,可能很多人會想到 WebSocket 這種能進行雙向溝通的協定,在 A 分頁操作完之後,通知 B, C, D 等分頁進行更新。

不過 WebSocket 在實作邏輯跟 RESTful API 不太相同之外,也需要額外的成本維護 WebSocket Server, 如果沒有特別必要的話,個人會視為最後同步的手段。

p.s. 但如果是股市交易、虛擬貨幣交易所那種掛單簿、即時報價、撮合等功能,就還是直接用 WebSocket 吧

撇除先前提到的解決方案,如果只是要做到簡單的瀏覽器跨分頁同步,其實可以使用 LocalStorage, 瀏覽器的 LocalStorage 本身就可以監聽 storage 的更新 event, 例如在監聽到特定的 key 值變化時,就呼叫更新頁面的函式:

addEventListener("storage", (event) => {
  if (event.key === "the_special_key") {
    // 更新頁面
    reloadPage();
  }
});

因為所有開同 1 個網頁的分頁都有這個 event listener, 所以它們都會在 LocalStorage 更新後自動更新頁面,保持頁面在最新的狀態,如此就可以做到很優雅而且低實作成本的瀏覽器跨分頁同步方案! 不過有人可能會想說,當前使用者在操作的分頁也會因為 LocalStorage 更新所觸發的更新頁面,導致中斷使用者可能正在進行的操作?

放心,使用者所在分頁造成的 LocalStorage 更新並不會觸發同 1 個分頁裡的 storage 事件,這是由瀏覽器所保證的。 MDN 文件也有清楚寫道:

This won’t work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made.

以上是優雅且低實作成本的瀏覽器跨分頁同步方案的介紹。

MDN 文件在此,順便加碼附上 1 個用 LocalStorage 做同步的 Webcam 多視窗畫面分割應用,還蠻有趣的,值得看一下 🙂

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!