在現代 Web 應用中，跨標簽頁通信的需求越來越普遍。無論是實現多標簽頁之間的數據同步，還是構建實時協作功能，跨標簽頁通信都能極大地提升用戶體驗。今天，我們將探討一種簡單而高效的實現方式：Web Storage。
一、什么是 Web Storage？
Web Storage 是一種在瀏覽器中存儲數據的機制，它提供了兩種存儲方式：localStorage 和 sessionStorage。這兩種存儲方式的主要區別在于數據的持久性和作用域。
localStorage：數據存儲在瀏覽器中，直到手動清除，適用于長期存儲數據。sessionStorage：數據存儲在當前會話中，關閉瀏覽器標簽頁后數據會自動清除，適用于臨時存儲數據。
（一）特點
- 簡單易用：API 簡潔，易于上手。
- 同源限制：所有存儲的數據必須在同源頁面之間訪問。
- 存儲容量：
localStorage通常有 5MB 的存儲空間，sessionStorage的存儲空間較小。
（二）適用場景
- 數據共享：在多個標簽頁之間共享數據。
- 狀態同步：同步用戶在多個標簽頁中的操作狀態。
- 臨時存儲：存儲用戶在當前會話中的臨時數據。
二、使用 Web Storage 實現跨標簽頁通信
（一）localStorage 的 onstorage 事件
localStorage 提供了一個 onstorage 事件，當存儲的數據發生變化時，會觸發該事件。這個事件可以用來實現跨標簽頁通信。
示例代碼
頁面一：設置數據
<!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>頁面一</title>
</head>
<body><input type="text" id="content" placeholder="請輸入消息"><button id="btn">發送消息</button><script>const content = document.querySelector("#content");const btn = document.querySelector("#btn");btn.onclick = function () {localStorage.setItem("message", content.value);};</script>
</body>
</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>頁面二</title>
</head>
<body><script>window.onstorage = function (e) {if (e.key === "message") {console.log("接收到消息:", e.newValue);}};</script>
</body>
</html>
（二）效果
- 打開兩個標簽頁，分別加載頁面一和頁面二。
- 在頁面一中輸入消息并點擊“發送消息”按鈕。
- 頁面二的控制臺會立即打印出接收到的消息。
（三）sessionStorage 的使用
sessionStorage 也可以用來實現跨標簽頁通信，但它的作用域僅限于當前會話。如果需要在多個標簽頁之間共享數據，建議使用 localStorage。
三、注意事項
（一）同源限制
Web Storage 只能在同源頁面之間使用。如果頁面的協議、域名或端口不同，存儲的數據將無法共享。
（二）存儲容量
雖然 localStorage 提供了較大的存儲空間，但仍然有限制。如果存儲的數據過多，可能會導致存儲失敗。
（三）性能影響
雖然 Web Storage 的性能開銷較小，但在高頻率讀寫數據時，仍需注意對性能的影響。
)
