sessionStorage多Tab標簽頁數據共享問題分析

目錄 問題描述 問題原因 sessionStorage 根據第二點 應該稱為復制而不是共享 問題描述 在 A 頁面設置一些 sessionStorage 數據，然后 a 標簽 _blank 方式打開另一個 tab B 頁面，發現 B 頁面有A 頁

目錄

• 問題描述
• 問題原因
• sessionStorage
• 根據第二點
• 應該稱為“復制”而不是“共享”

問題描述

在 A 頁面設置一些?sessionStorage?數據，然后 a 標簽 _blank 方式打開另一個 tab B 頁面，發現 B 頁面有A 頁面的?sessionStorage?數據。

問題原因

不同 tab 頁面 sessionStorage 數據出現了 “共享”。

sessionStorage

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

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

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

根據第二點

簡單嘗試后發現

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

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

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

應該稱為“復制”而不是“共享”

在 A 頁面設置一些?sessionStorage?數據，然后 a 標簽 _blank 方式打開另一個 tab B 頁面，發現 B 頁面有A 頁面的?sessionStorage?數據。此時兩個頁面的sessionStorage相互獨立，修改不會影響對方，所以稱為復制更為準確。

以上就是sessionStorage 多 Tab 標簽頁數據“共享”的詳細內容，更多關于sessionStorage 多 Tab 標簽頁數據“共享”的資料請關注技圈網其它相關文章！