目錄問(wèn)題描述問(wèn)題原因sessionStorage根據(jù)第二點(diǎn)應(yīng)該稱為“復(fù)制”而不是“共享”問(wèn)題描述

在 A 頁(yè)面設(shè)置一些 sessionStorage 數(shù)據(jù)，然后 a 標(biāo)簽 _blank 方式打開(kāi)另一個(gè) tab B 頁(yè)面，發(fā)現(xiàn) B 頁(yè)面有A 頁(yè)面的 sessionStorage 數(shù)據(jù)。

問(wèn)題原因

不同 tab 頁(yè)面 sessionStorage 數(shù)據(jù)出現(xiàn)了 “共享”。

sessionStorage

為什么會(huì)共享呢？下面看下 sessionStorage 的官方 MDN 介紹：

頁(yè)面會(huì)話在瀏覽器打開(kāi)期間一直保持，并且重新加載或恢復(fù)頁(yè)面仍會(huì)保持原來(lái)的頁(yè)面會(huì)話。在新標(biāo)簽或窗口打開(kāi)一個(gè)頁(yè)面時(shí)會(huì)復(fù)制頂級(jí)瀏覽會(huì)話的上下文作為新會(huì)話的上下文，這點(diǎn)和 session cookie 的運(yùn)行方式不同。打開(kāi)多個(gè)相同的 URL 的 Tabs 頁(yè)面，會(huì)創(chuàng)建各自的 sessionStorage。關(guān)閉對(duì)應(yīng)瀏覽器標(biāo)簽或窗口，會(huì)清除對(duì)應(yīng)的 sessionStorage。存儲(chǔ)在 sessionStorage 中的數(shù)據(jù)特定于頁(yè)面的協(xié)議。意思就是：http://example.com 與 https://example.com 的 sessionStorage 相互隔離。被存儲(chǔ)的鍵值對(duì)總是以 UTF-16 DOMString 的格式所存儲(chǔ)，其使用兩個(gè)字節(jié)來(lái)表示一個(gè)字符。對(duì)于對(duì)象、整數(shù) key 值會(huì)自動(dòng)轉(zhuǎn)換成字符串形式。根據(jù)第二點(diǎn)

簡(jiǎn)單嘗試后發(fā)現(xiàn)

通過(guò)新建標(biāo)簽頁(yè)打開(kāi)相同的頁(yè)面（屬于第三條）創(chuàng)建獨(dú)立 sessionStorage。通過(guò) window.open 打開(kāi)新標(biāo)簽頁(yè)，共享了原 tab 頁(yè)中的 sessionStorage。通過(guò) a 標(biāo)簽 _blank 方式打開(kāi)新 tab 頁(yè)，Chrome 86 瀏覽器共享了 sessionStorage，Chrome 113 和 Firefox 瀏覽器并沒(méi)有共享。

所以對(duì)于 a 標(biāo)簽打開(kāi)的頁(yè)面，是否“共享”sessionStorage 屬于瀏覽器兼容性問(wèn)題。

在 Chrome 89 版本前，a 標(biāo)簽跳轉(zhuǎn)會(huì)共享 sessionStorage。而在 2021年 3月 Chrome 89 版本后，通過(guò) a 標(biāo)簽 target="_blank" 跳轉(zhuǎn)到新頁(yè)面時(shí) sessionStorage 就會(huì)丟失。

應(yīng)該稱為“復(fù)制”而不是“共享”

在 A 頁(yè)面設(shè)置一些 sessionStorage 數(shù)據(jù)，然后 a 標(biāo)簽 _blank 方式打開(kāi)另一個(gè) tab B 頁(yè)面，發(fā)現(xiàn) B 頁(yè)面有A 頁(yè)面的 sessionStorage 數(shù)據(jù)。此時(shí)兩個(gè)頁(yè)面的sessionStorage相互獨(dú)立，修改不會(huì)影響對(duì)方，所以稱為復(fù)制更為準(zhǔn)確。

以上就是sessionStorage 多 Tab 標(biāo)簽頁(yè)數(shù)據(jù)“共享”的詳細(xì)內(nèi)容，更多關(guān)于sessionStorage 多 Tab 標(biāo)簽頁(yè)數(shù)據(jù)“共享”的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！