問題描述

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

問題原因

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

sessionStorage

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

• 頁面會(huì)話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁面仍會(huì)保持原來的頁面會(huì)話。
• 在新標(biāo)簽或窗口打開一個(gè)頁面時(shí)會(huì)復(fù)制頂級(jí)瀏覽會(huì)話的上下文作為新會(huì)話的上下文，這點(diǎn)和 session cookie 的運(yùn)行方式不同。
• 打開多個(gè)相同的 URL 的 Tabs 頁面，會(huì)創(chuàng)建各自的 sessionStorage。
• 關(guān)閉對(duì)應(yīng)瀏覽器標(biāo)簽或窗口，會(huì)清除對(duì)應(yīng)的 sessionStorage。

• 存儲(chǔ)在 sessionStorage 中的數(shù)據(jù)特定于頁面的協(xié)議。意思就是：http://example.com 與 https://example.com 的 sessionStorage 相互隔離。
• 被存儲(chǔ)的鍵值對(duì)總是以 UTF-16 DOMString 的格式所存儲(chǔ)，其使用兩個(gè)字節(jié)來表示一個(gè)字符。對(duì)于對(duì)象、整數(shù) key 值會(huì)自動(dòng)轉(zhuǎn)換成字符串形式。

根據(jù)第二點(diǎn)

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

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

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

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

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

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

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

最新評(píng)論