Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

255
Views
How to share Session storage data with other opened browser tabs in React

Here I have a part of a code, in which I needed to log in to the application, and I am storing the token in both local and session storage so that it can handle during the beforeunload event, storing in session will help during refresh and local to share data with multiple tabs so that I don't have to log in each time when opening a new tab.

But the problem I am facing is -

  • When I sign in to the application and if I open a new tab on loading of the new tab I can see the application gets logged in, but when I refresh it goes back to log in page, as I checked there is no token in session storage, so while refreshing the page it is logging out.

The solution I needed is -

  • How to get the data from session storage of the signed-in tab and send them across to all newly opened tabs, I have seen something like we can storage events or Broadcast API but I really don't know how to implement them in react and where to implement in this code

Code

useEffect(() => {
window.addEventListener("beforeunload",() => {
localStorage.removeItem("token")
let loggedIn = localStorage.getItem('token');
let sessionLoggedIn = sessionStorage.getItem('token');
if(!loggedIn) {
    if(sessionLoggedIn) {
        localStorage.setItem('token', JSON.parse(sessionLoggedIn));
        //go to authenticated space
        window.location.href = '/authenticated';
    } else {
        //go to login
        window.location.href = '/login';
    }
} else {
    //go to authenticated space
    window.location.href = '/authenticated';
}
})
})

While Signing in - I am storing the token with the value of random strings in both local and session storage when the user logs in to the application.

My complete requirement is -

  • After a user logs in to the site in any tab if they navigate to the site in a new tab they must already be logged in
  • When a user logs out of any tab they must log out of all tabs immediately
  • A user can refresh the page and stay logged in
  • Once all tabs are closed the user is logged out and must log back in

If any other implementation to replace this method also is much appreciable

Can someone guide me on how to achieve my requirement, Thanks a million!!!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Both the localStorage and sessionStorage objects are from the current origin. Every tab of a browser is from a different origin(unless they are browsing the same site) and the session/local storage objects are going to be unique to these tabs.

However, if both the tabs run scripts that are controlled by you, it is possible to share the storage data between tabs using an API like BroadcastChannel.

var bc = new BroadcastChannel('share_storage');
bc.postMessage(window.sessionStorage);
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!