sessionStorage詳解

sessionStorage可以使用setItem設置、getItem獲取、removeItem刪除、clear清空。具體詳見MDN

MDN解釋

sessionStorage 屬性允許你訪問一個 session Storage 對象。它與 localStorage 相似,不同之處在於 localStorage 裏面存儲的數據沒有過期時間設置,而存儲在 sessionStorage 裏面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持,並且重新加載或恢復頁面仍會保持原來的頁面會話。**在新標籤或窗口打開一個頁面時會在頂級瀏覽上下文中初始化一個新的會話,**這點和 session cookies 的運行方式不同。

可以看到sessionStorage在頁面會話結束時會被清除,也就是講一個頁面上的sessionStorage在頁面刷新或者恢復頁面的時候都不會丟失或者被清空。

那一個域名下的sessionStorage 的數據會在同一網站的多個標籤頁之間共享嗎?要解決這個問題,使用chrome測試了一下場景。

當在一個a頁面有sessionStorage時,這時新增一個標籤並輸入與a頁面相同的url。新的標籤裏面打開的頁面是沒有另一個標籤頁面裏面的sessionStorage時。也就是講,新標籤是新的會話。

_blank: 在a頁面點擊鏈接或者使用window.open打開與a頁面相同url的標籤頁面時,新標籤頁面sessionStorage繼承自之前頁面的sessionStorage,但是後續兩個頁面的sessionStorage是單獨控制的。兩個頁面之間並無關聯

結論

  1. 不同tab之間就算相同url,sessionStorage也是不會共享的。sessionStorage只存在於當前會話中。
  2. 使用window.open或者點擊鏈接跳轉的頁面,新頁面的sessionStorage會拷貝老頁面的。但兩者之間並無關聯,還是兩個會話。

參考

https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context

https://liyaoli.com/2015-03-12/HTML-iframe.html

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

https://github.com/lmk123/blog/issues/66

https://segmentfault.com/a/1190000016910121

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章