Chrome89針對sessionStorage的更新致使數據共享問題

最近將chrome更新到最新的版本，而後發現之前能夠正常使用的功能沒法使用了，通過分析後發現是瀏覽器新版本纔出現的問題，今天記錄如下。

1、遇到的問題
咱們具體的問題場景，在A頁面中須要打開B頁面，同時須要在兩個頁面之間共享一些數據；
在A頁面中咱們將共享的數據保存到sessionStorage中,並新建超連接元素並觸發其單擊事件。

sessionStorage.setItem('parameter', JSON.stringify(parameter));
var link = angular.element('<a href="' + url + '" rel="noopener" target="' + target + '"></a>');
angular.element(document.body).append(link);
link[0].click();
link.remove();

而後在B頁面中獲取保存在sessionStorage中的數據並進行處理。

var key = 'parameter';
var parameter = sessionStorage.getItem(key);
if (parameter) {
    parameterObj = JSON.parse(para);
	......
    sessionStorage.removeItem(key);
}

可是將chrome瀏覽器更新到89.0.4389.90 以後，發現A頁面保存的數據在B頁面中沒法獲取到。
查看chrome的更新說明，發現其針對sessionStorage進行了更新.

https://developer.chrome.com/blog/deps-rems-89/#stop-cloning-sessionstorage-for-windows-opened-with-noopener

Stop cloning sessionStorage for windows opened with noopener 
When a window is opened with noopener, 
Chrome will no longer clone the sessionStorage of its opener; 
it will instead start an empty sessionStorage namespace. 
This brings Chrome in conformance with the HTML specification.

經過Chrome Plateform Status咱們能夠看到全平臺的89版本的Chrome默認開啓了這個功能，也能夠看到其餘幾個主流的瀏覽器對這個功能的支持狀況。
https://www.chromestatus.com/feature/5679997870145536

When a window is opened with noopener, Chrome should not clone the sessionStorage of its opener; it should instead start from an empty sessionStorage namespace.

Motivation
This is a bugfix to match the HTML specification, which added this behavior in 2017:  https://github.com/whatwg/html/pull/2832

Status in Chromium
Blink components: Blink>Storage


Enabled by default (tracking bug) in:

Chrome for desktop release 89
Chrome for Android release 89
Android WebView release 89
Consensus & Standardization
After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Firefox:Shipped/Shipping
Edge:Positive
Safari:No signal
Web Developers:No signals

2、sessionStorage的規範

1. 頁面會話在瀏覽器打開期間一直保持，而且從新加載或恢復頁面仍會保持原來的頁面會話。
2. 在新標籤或窗口打開一個頁面時會複製頂級瀏覽會話的上下文做爲新會話的上下文，這點和 session cookies 的運行方式不一樣。
3. 打開多個相同的URL的Tabs頁面，會建立各自的sessionStorage。
4. 關閉對應瀏覽器窗口（Window）/ tab，會清除對應的sessionStorage。

3、解決方案

經過以上分析咱們能夠知道，新版本的Chrome瀏覽器不會再複製sessionStorage給經過noopener方式打開的新頁面，致使沒法在新的標籤頁裏邊訪問到共享的數據，因爲打開的是咱們同一個站點的頁面，能夠直接將超連接的rel的值改成opener便可。

sessionStorage.setItem('parameter', JSON.stringify(parameter));
var link = angular.element('<a href="' + url + '" rel="opener" target="' + target + '"></a>');
angular.element(document.body).append(link);
link[0].click();
link.remove();