SessionStorage 如何在多個 tab 間共享數(shù)據(jù)？
Hello，大家好，我是 Sunday。
過了臘八就是年，Sunday 提前祝大家新年快樂，2025 暴富暴富暴富！
我們知道 SessionStorage 是不可以在多個 tab 之間共享數(shù)據(jù)的。但是一個同學(xué)在面試的時候，卻被面試官問到：“SessionStorage 如何在多個 tab 間共享數(shù)據(jù)？” 注意： 他并沒有問能不能，而是問的 如何？ 那么是他問錯了嗎？恐怕不是的~~
面試流程回顧
我聽了這位同學(xué)的面試錄音整個流程是由三個問題組成的：
問題一：localStorage和sessionStorage有什么區(qū)別？
- localStorage的數(shù)據(jù)是持久化的，只要我們不主動清除它，它就會一直存在。
- 而 sessionStorage 會隨著選項卡/窗口的關(guān)閉，結(jié)束會話并清除存儲的數(shù)據(jù)。
問題二：同域下localStorage可以共享數(shù)據(jù)嗎？
當(dāng)然可以。我們可以直接通過簡單的代碼來驗證這個問題：
// 在一個網(wǎng)頁中保存數(shù)據(jù)
localStorage.setItem('name', '張三')
// 從另一個同域的網(wǎng)站中可以直接獲取
localStorage.getItem('name') // 張三問題三：那么 sessionStorage 可以在多個 tab 間共享數(shù)據(jù)嗎？
重頭戲來了！
這位同學(xué)回答的是：“不可以！” 每個窗口或選項卡都有一個單獨的 sessionStorage，它們之間沒有數(shù)據(jù)共享！
但是你確定嗎？
如何實現(xiàn) sessionStorage 數(shù)據(jù)共享
我們先看下 mdn 中對 sessionStorage 的介紹：
圖片
根據(jù) mdn 的描述我們可以清楚的看到，打開多個相同的 URL 的 Tabs 頁面，會創(chuàng)建各自的 sessionStorage 也就是說 不可共享。
所以，我們來做一個實驗：
- 我們創(chuàng)建兩個 html 文件，分別為 test.html 和 test02.html
// test.html
<body>
<button id="btn">點我</button>
<script>
const btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
window.sessionStorage.setItem('name', '張三')
window.open('http://127.0.0.1:5500/test02.html')
})
</script>
</body>// test02.html
<body>
<div id="name"></div>
<script>
const nameEle = document.querySelector('#name')
nameEle.innerHTML = window.sessionStorage.getItem('name')
</script>
</body>兩塊代碼并不復(fù)雜，在 test 中我們保存了 name 到 sessionStorage 同時打開了 test02.html ，并且 保證他們是同域的，然后再 test02 中，輸出了保存的 name（注意： 以上代碼需要運行在服務(wù)上）。
執(zhí)行以上代碼之后，可以發(fā)現(xiàn)在 test02 中 成功 的打印出了保存的數(shù)據(jù) 張三！
分析原因
那么以上實驗證明 sessionStorage 似乎可以共享數(shù)據(jù)。難道 mdn 上說的是錯誤的嗎？當(dāng)然不是。
以下是結(jié)論：
sessionStorage 確實無法在多個窗口或標(biāo)簽之間共享數(shù)據(jù)。但是當(dāng)通過 window.open 或鏈接打開新頁面時，新頁面將復(fù)制前一頁面的 sessionStorage，以此來完成數(shù)據(jù)共享！
