Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

256
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda