localStorage作用範圍：本地存儲，關閉瀏覽器後，數據依然會保存。同源瀏覽器窗口可以共享使用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就算關閉瀏覽器數據也依然會保留在本地。