問題描述
在 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相互獨立，修改不會影響對方，所以稱為複製更為準確。
