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();