最近，我的一個朋友在面試時(shí)被一個關(guān)于sessionStorage的問題難住了。

好吧，我必須承認(rèn)，我對此并不熟悉。

面試題是：sessionStorage可以在多個選項(xiàng)卡之間共享數(shù)據(jù)嗎？

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

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

我的朋友：他感到很高興，因?yàn)檫@是任何一個前端開發(fā)工程師都知道的知識。

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

關(guān)閉選項(xiàng)卡/窗口會結(jié)束會話并清除 sessionStorage 中的對象。

問題二：同一個網(wǎng)站下localStorage可以共享數(shù)據(jù)嗎？

我的朋友：“這又是一件簡單的事！數(shù)據(jù)可以在同一網(wǎng)站下的不同選項(xiàng)卡或窗口之間共享”

// 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可以在多個選項(xiàng)卡之間共享數(shù)據(jù)嗎？”

我的朋友：“不，每個窗口或選項(xiàng)卡都有一個單獨(dú)的sessionStorage，它們之間沒有數(shù)據(jù)共享”

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

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

也許，我的朋友因?yàn)檫@個問題而錯過了offer，但作為一名開發(fā)人員，我們需要不斷提高我們的知識和技能。

什么是會話存儲？

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

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

只要選項(xiàng)卡或?yàn)g覽器打開，頁面會話就會持續(xù)，并且在頁面重新加載和恢復(fù)后仍然存在。

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

使用相同的 URL 打開多個選項(xiàng)卡/窗口會為每個選項(xiàng)卡/窗口創(chuàng)建 sessionStorage。

復(fù)制選項(xiàng)卡會將選項(xiàng)卡的 sessionStorage 復(fù)制到新選項(xiàng)卡中。

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

假設(shè)我們在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 可以在多個選項(xiàng)卡之間共享數(shù)據(jù)嗎？

最終答案

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

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

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

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

所以，我們可以得出結(jié)論，sessionStorage不能在多個窗口或選項(xiàng)卡之間共享數(shù)據(jù)，但是，當(dāng)通過window.open或鏈接打開新頁面時(shí)，新頁面會復(fù)制上一個頁面的sessionStorage。

總結(jié)

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