Chrome更新89版本后，sessionStorage丢失a标签跳转丢失sessionStorage

ocalStorage作用范围：本地存储，关闭浏览器后，数据依然会保存。同源浏览器窗口可以共享使用localStorage存储的数据。

sessionStorage作用范围：只存在于当前会话页面，当会话结束后，数据也随之销毁，在不同的浏览器窗口中共享。也就是存在于当前浏览器页面，页面关闭，数据也会删除。（注意：通过鼠标右键打开的新标签无法共享sessionStorage）

而这块对于sessionStorage可能一直存在一个误区，在Chrome浏览器89版本前，当前会话页面指的是当浏览器窗口没有关闭时，窗口内同域网站可以共享此数据（同源浏览器多个窗口不共享），当页面全部关闭或窗口关闭后，sessionStorage数据会被摧毁，所以你用a标签跳转还是js跳转都会共享sessionStorage。

而在2021年3月初Chrome浏览器进行了批量更新，更新到89版本后，通过a标签target="_blank"跳转到新页面时sessionStorage就会丢失。Chrome这一更新可能会导致很多网站的sessionStorage丢失，页面可能直接就崩掉了。

解决办法如下：

1、最简单的解决办法 - a标签添加属性 rel=“opener”

在旧版本Chrome中通过a 标签target="_blank"时跳转到新页面，新页面 window 对象上有一个 opener 属性，新页面会获得前一个页面控制权，就会出现安全问题，noopener 就可以解决这个问题，设置后，新页面的window.opener 就为 null 了。

更新后，Chrome对于a标签默认添加了noopener属性，所以通过a标签跳转，会丢失新页面的控制权，sessionStorage自然也就丢失了，我们只需要在a标签上加上 rel=“opener” 就行了。

保留 sessionStorage
如果你用的是react-router或vue-router也可以直接在Link上添加rel=“opener”

参考资料：

SEO优化之a标签rel属性的使用

a标签属性 rel=noopener noreferrer

2、a标签换成js方法 - window.open

这里只是通过a标签target="_blank"跳转到新页面的方法会丢失sessionStorage，如果用的是window.open则不用担心此问题，可以给菜单标签绑定onclick事件。

3、换储存方法 - cookie/localStorage

这个方法不太好，一个是因为改动可能会比较大，其次是cookie可以存储的数据量要比sessionStorage小，如果存储的只是id之类的完全可以换成cookie，但如果存储的是用户数据对象的话就不太行了。而用localStorage存储则要考虑安全性问题，localStorage就算关闭浏览器数据也依然会保留在本地。

————————————————
版权声明：本文为CSDN博主「shay921」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liu940107600/article/details/114969387