Why is sessionStorage preserved across multiple tabs?

Question

From Window.sessionStorage docs:

Opening multiple tabs or Windows on the same URL creates sessionStorage for each tab or Window

https://stackblitz.com/edit/session-storage?file=index.js

Enter your name and click "store"

Your name is now stored in sessionStorage and page view is updated.

sessionStorage.setItem('name', nameInput.value);
nameSpan.innerHTML = nameInput.value;

Now click "open in new tab"

This will open page in new tab by creating link element to the current page, and calling click() on it

const link = document.createElement('a');
link.target = '_blank';
link.href = '/';
link.setAttribute('visibility', 'hidden');
document.body.appendChild(link);
link.click();
link.remove();

As you can see, your name is still there

Why is this happening and is there a way to make new tab open with empty sessionStorage (without clearing current tab sessionStorage)?

Tested this on Chrome 75 and Firefox 66

No, it has nothing to do with stackblitz, behaves the same way on localhost

Answer 1

Stop cloning sessionStorage for windows opened with noopener after release 89 https://www.chromestatus.com/feature/5679997870145536#details

Answer 2

Reason:

The HTML standard changed to specify that anchors that target _blank should behave as if |rel="noopener"| is set. https://www.chromestatus.com/feature/6140064063029248

Recently, Chrome 89 behaviour has been changed to match the HTML standard specification:

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

Solution:

Add attribute rel="opener" to the a tag.

This will duplicate the sessionStorage to the new tab opened by clicking on the link.

<a href="http://..." target="_blank" rel="opener">Link</a>