最近，我的一個朋友在面試時被一個關于sessionStorage的問題難住了。

好吧，我必須承認，我對此并不熟悉。

面試題是：sessionStorage可以在多個選項卡之間共享數據嗎？

具體面試中涉及到的一些問題與面試流程

問題1：“你知道localStorage和sessionStorage有什么區別嗎？”

我的朋友：他感到很高興，因為這是任何一個前端開發工程師都知道的知識。

localStorage的數據是持久化的，只要我們不主動清除它，它就會一直存在。

關閉選項卡/窗口會結束會話并清除 sessionStorage 中的對象。

問題二：同一個網站下localStorage可以共享數據嗎？

我的朋友：“這又是一件簡單的事！數據可以在同一網站下的不同選項卡或窗口之間共享”

// Let's try to set a name in window 1 page 1
localStorage.setItem('name', 'fatfish')
// We try to read the current name in window 2 page 2
localStorage.getItem('name') // fatfish

面試官對我朋友說，你太棒了，我想再問你一個面試題，于是就有了第三個面試題。

問題3：sessionStorage可以在多個選項卡之間共享數據嗎？”

我的朋友：“不，每個窗口或選項卡都有一個單獨的sessionStorage，它們之間沒有數據共享”

面試官：“你真的確定是這樣嗎？”

我的朋友：“呃！我不確定，也許吧！”

也許，我的朋友因為這個問題而錯過了offer，但作為一名開發人員，我們需要不斷提高我們的知識和技能。

什么是會話存儲？

來自 MDN：只讀 sessionStorage 屬性訪問當前源的會話存儲對象。sessionStorage與localStorage類似；不同之處在于，localStorage 中的數據不會過期，而 sessionStorage 中的數據會在頁面會話結束時被清除。

每當文檔加載到瀏覽器的特定選項卡中時，就會創建一個唯一的頁面會話并將其分配給該特定選項卡。該頁面會話僅對特定選項卡有效。

只要選項卡或瀏覽器打開，頁面會話就會持續，并且在頁面重新加載和恢復后仍然存在。

在新選項卡或窗口中打開頁面會創建一個具有頂級瀏覽上下文值的新會話，這與會話 cookie 的工作方式不同。

使用相同的 URL 打開多個選項卡/窗口會為每個選項卡/窗口創建 sessionStorage。

復制選項卡會將選項卡的 sessionStorage 復制到新選項卡中。

請注意第三點！或者我們可以在這里找到答案！

假設我們在https://medium.com/page/1中寫了這樣一段代碼：

btn.addEventListener('click', () => {
  window.sessionStorage.setItem('name', 'fatfish')
  window.open('https://medium.com/page/2')
})

我可以在 https://medium.com/page/2 獲取名稱值嗎？

console.log(window.sessionStorage.getItem('name')) // null or fatfish?

是的，答案就是fatfish。那么，我們確定 sessionStorage 可以在多個選項卡之間共享數據嗎？

最終答案

讓我們嘗試再次繼續執行 https://medium.com/page/1 上的一段代碼。

window.sessionStorage.setItem('name', 'medium')
window.sessionStorage.setItem('age', '1000')

如果sessionStorage可以在不同窗口或選項卡之間共享數據，那么https://medium.com/page/2也可以獲取name和age的最新值

console.log(window.sessionStorage.getItem('name')) // 111
console.log(window.sessionStorage.getItem('age')) // null

所以，我們可以得出結論，sessionStorage不能在多個窗口或選項卡之間共享數據，但是，當通過window.open或鏈接打開新頁面時，新頁面會復制上一個頁面的sessionStorage。

總結

以上就是我今天想與你分享的知識內容，希望對你有所幫助，最終，感謝你的閱讀。