I am trying to have a JS state that is retained when user opens a new tab (or new window), but is not retained on explicit page refresh. Is that possible in JS ?
So I am trying to somehow achieve reverse of what sessionStorage can give which states as per MDN docs; Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
Sounds like you could keep the state in local storage. When the page is loaded, check if a session storage value exists - if so, don't retrieve the data from local storage. Otherwise, if the session storage value doesn't exist, it's a new page, in which case you can retrieve the state from local storage.
Regardless, whenever a page is loaded, set a session storage value so it can be read later by the above logic, in case the page gets refreshed.