問題描述

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

問題原因

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

sessionStorage

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

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

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

根據(jù)第二點

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

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

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

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

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

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

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

最新評論