面試官：你確定多窗口之間 sessionStorage 不能共享狀態嗎?

作者：不要禿頭啊 

https://juejin.cn/post/7076767687828832286

面試官：你確定多窗口之間 sessionStorage 不能共享狀態嗎？？？🤔

一、背景

面試官：說一說localStorage和sessionStorage區別唄？😊

我：巴拉巴拉。。。（這不是小 case 嘛，面經都背爛了）

面試官：那同域下多窗口間localStorage能共享嗎？😯

我：可以呀，如果頁面中出現了串數據的話，很大概率就是 localStorage 共享導致的呢。

面試官：localStorage既然可以，那sessionStorage在多窗口之間能共享狀態嗎？😎

我：當然不行，每一個窗口之間 sessionStorage 都是獨立的，相互不影響，窗口關閉瀏覽器就自動銷燬了！（斬釘截鐵，認真臉）

面試官：你確定多窗口之間sessionStorage不能共享狀態嗎？？？🤔

我：這個。。。。不太確定。。。。待我去查查資料再來。。。😭

由此引出我們今天的主題：sessionStorage在同域下的多窗口之間能共享狀態嗎？

二、查閱文檔

根據 MDN 的說法：sessionStorage 屬性允許你訪問一個，對應當前源的 session Storage 對象。它與 localStorage 相似，不同之處在於 localStorage 裏面存儲的數據沒有過期時間設置，而存儲在 sessionStorage 裏面的數據在頁面會話結束時會被清除。

  1. 頁面會話在瀏覽器打開期間一直保持，並且重新加載或恢復頁面仍會保持原來的頁面會話。

  2. 在新標籤或窗口打開一個頁面時會複製頂級瀏覽會話的上下文作爲新會話的上下文， 這點和 session cookies 的運行方式不同。

  3. 打開多個相同的 URL 的 Tabs 頁面，會創建各自的 sessionStorage。

  4. 關閉對應瀏覽器標籤或窗口，會清除對應的 sessionStorage。

對於上面的說法，第 134 點相信都是符合大家認知的，那第二點是啥意思呢？

筆者爲了搞懂第二點，接着繼續查閱文檔。。。

經過一系列的學習 (百度) 之後，筆者發現如果從本頁面以新開頁籤的方式打開一個同域下的新頁面，新開的頁面會和之前的頁面 ‘共享’ sessionStorage。

舉個實際一點的例子：現有頁面 A，在頁面 A 中執行

window.sessionStorage.setItem("pageA_1","123")

在頁面中有個 button 按鈕，點擊按鈕觸發 window.open("同源頁面")，現得到新開的頁面 B，在 B 中執行

window.sessionStorage.getItem("pageA_1") //拿到的結果是 "123"

這裏的 B 頁面居然是能拿到值的！！！！現在我終於能對面試官說：多窗口之間sessionStorage真的可以共享狀態！！

此時面試官：再給你一次機會，好好組織一下語言🤔️

三、真的是這樣嗎？

哎，等等，如果真的能共享數據，那 sessionStorage 不是也會出現串數據的情況嗎，我怎麼記得平時並不會。。。

接下來我們繼續測試，在頁面 A 中繼續執行

window.sessionStorage.setItem("pageA_1","456") (之前的pageA_1設置的值是 ‘123’ )
window.sessionStorage.setItem("pageA_2","789")

在頁面 B 中再次嘗試獲取：

window.sessionStorage.getItem("pageA_1") //拿到的結果還是 "123" !!!
window.sessionStorage.getItem("pageA_2") //拿到的結果是 null !!!

what??? 怎麼回事？怎麼現在又不‘共享’了呢？

我們現在再次回去理解一下 MDN 的說法：在該標籤或窗口打開一個新頁面時會複製頂級瀏覽會話的上下文作爲新會話的上下文

哦～ 原來如此～ 原來只有在本頁面中以新頁籤或窗口打開的同源頁面會‘臨時共享’之前頁面的 sessionStorage。

而且共享這個詞似乎也並不怎麼準確，準確來說應該叫複製更加專業！

現在我終於能再次對面試官說：多窗口之間sessionStorage不可以共享狀態！！！但是在某些特定場景下新開的頁面會複製之前頁面的sessionStorage！！

此時面試官：嗯～小夥子看來理解的還不錯嘛

四、總結

其實不僅window.open("同源頁面")這種方式新開的頁面會複製之前的 sessionStorage，通過a標籤新開的頁面同樣也會，原理相同，在這就不贅述了。

五、其他

這裏可能有部分同學要問了：如果我就是不想要這種複製的效果怎麼辦呢？這裏筆者認爲優雅一點的方式是先新建一個空白頁面窗口，再將 url 設置到窗口中的地址欄中去。

最後，希望這篇文章能夠幫助到你😁，如果文章中出現有紕漏的地方希望大家積極指正～。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/AQlYV84Wm1JPX_EpdZp4lg

猜你喜歡