ClearTimeout set in another tab

Question

How can I clear timeout that has been set in another tab in browser?

I tried by storing timeout reference in localStorage, but could not clear timeout

function setIdleTimeout() {
    var idleTimeout = setTimeout(function() {
        //autologout
    }, 20000);
    localStorage.setItem('idleTimeout', idleTimeout);
}

function clearIdleTimeout() {
    var idleTimeout = localStorage.getItem('idleTimeout');
    clearTimeout(idleTimeout);
    localStorage.setItem('idleTimeout', idleTimeout);
}

If I call clearIdleTimeout() in second tab, it does not clear the timeout set in previous tab

Answer 1

tab "a"

var timeout, interval;

timeout = setTimeout(function() {
  alert(123) // this should not be called
  clearTimeout(timeout)
  timeout = null;
  clearInterval(interval);
  interval = null;
}, 20000);
localStorage.setItem("timeout", timeout);

interval = setInterval(function() {
  console.log("checking localStorage:", localStorage.getItem("timeout"));
  // if `!localStorage.getItem("timeout")` : `true` 
  // call `clearTimeout()` with `timeout` as paramter
  if (!localStorage.getItem("timeout")) {
    clearTimeout(timeout);
    timeout = null;
    alert("cleared");
    clearInterval(interval);
    interval = null;
  }
}, 100)

plnkr http://plnkr.co/edit/wttPFS5RLgCu5OnF05Z1?p=info

tab "b"

var t;
t = setTimeout(clearTabTimeout, 5000);

// clear `timeout` at `tab` "a"
function clearTabTimeout() {
  // remove `"timeout"` item from `localStorage`
  localStorage.removeItem("timeout");
  console.log(localStorage);
}

plnkr http://plnkr.co/edit/CgQqlVIUzUo7zeHCb2Ca?p=preview