優雅且低實作成本的瀏覽器跨分頁同步方案 — 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 多視窗畫面分割應用，還蠻有趣的，值得看一下 🙂