sessionStorage 能在多個標籤頁之間共享資料嗎？

林恒發表於2024-06-27
Session

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

最近，我的一個朋友在面試中被一個關於 sessionStorage 的問題難住了。我們來聊聊這個話題。

sessionStorage 能在多個標籤頁之間共享資料嗎？在回答這個問題之前我們先來聊聊另一個儲存API localstorage

localstorage與sessionStorage經常是放在一起討論，那他們之間的區別是什麼呢？

只讀的localStorage 屬性允許你訪問一個Document 源（origin）的物件 Storage；儲存的資料將儲存在瀏覽器會話中。localStorage 類似 sessionStorage，但其區別在於：儲存在 localStorage 的資料可以長期保留；而當頁面會話結束——也就是說，當頁面被關閉時，儲存在 sessionStorage 的資料會被清除。(這是來自MDN的解釋)

那麼 localstorage可以在同一網站下共享資料嗎？答案顯而易見是可以的。

// 你可以在第一個tab裡面儲存一個資料
localStorage.setItem('name', 'fatfish')
// 在另外一個tab讀取這個資料
localStorage.getItem('name') // fatfish

那麼sessionStorage呢？ 來看看MDN中的解釋

  • 頁面會話在瀏覽器開啟期間一直保持，並且重新載入或恢復頁面仍會保持原來的頁面會話。
  • 在新標籤或視窗開啟一個頁面時會複製頂級瀏覽會話的上下文作為新會話的上下文，這點和 session cookie 的執行方式不同。
  • 開啟多個相同的 URL 的 Tabs 頁面，會建立各自的 sessionStorage。
  • 關閉對應瀏覽器標籤或視窗，會清除對應的 sessionStorage。

根據第二點，在新開啟的頁面上應該是可以共享資料的，基於此我本人嘗試了一下在掘金主頁(juejin.cn/) 下執行以下程式碼

window.sessionStorage.setItem('canShare','yes')

然後隨機開啟首頁的推薦文章(juejin.cn/post/734279…) 讀取資料

window.sessionStorage.getItem('canShare') // null
所以結論是不行，MDN上的解釋錯了？ 我們再做以下測試在掘金主頁(juejin.cn/) 下執行以下程式碼
window.sessionStorage.setItem('canShare','yes');
window.open('https://juejin.cn/post/7342793254096109583', 'aa');
然後隨機開啟首頁的推薦文章(juejin.cn/post/734279…) 讀取資料
window.sessionStorage.getItem('canShare') // yes

回過頭來我再對掘金首頁做以下操作

window.sessionStorage.setItem('canShare','yes');

然後我把推薦文章連結中的target="__blank"屬性刪除，然後再次點選開啟 然後執行

window.sessionStorage.getItem('canShare') // yes

成功的列印出了資料。

結論:

因此，我們可以得出結論：

sessionStorage 不能在多個視窗或標籤頁之間共享資料，但是當透過 window.open 或連結開啟新頁面時(不能是新視窗)，新頁面會複製前一頁的 sessionStorage。

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

sessionStorage 能在多個標籤頁之間共享資料嗎？

相關文章