JSFiddle - React, Tailwind, and code Playground

by Ivan Shukshin

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="console">
  open this page in many tabs and press logout in one of them!
</div>

<button type=button id="logout">Logout</button>

CSS

#console{
  border:1px solid lightgreen;
  padding:10px;
}

JavaScript

// check if localStorage available 
// http://stackoverflow.com/questions/16427636/check-if-localstorage-is-available
function lsTest(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

// listen to storage event
window.addEventListener('storage', function(event){
    // do what you want on logout-event
    if (event.key == 'logout-event') {
      $('#console').html('Received logout event! Insert logout script here.');
      // window.location = "logout.php";
    }
}, false);

$(document).ready(function(){
  if(lsTest()) {
    $('#logout').on('click', function(){
      // change logout-event and therefore send an event
      localStorage.setItem('logout-event', 'logout' + Math.random());
      return true;
    });   
  } else {
     // setInterval or setTimeout
  }
});