javascript - 在另一个选项卡中设置 ClearTimeout

Question

如何清除浏览器中另一个选项卡中设置的超时？

我尝试在 localStorage 中存储超时引用，但无法清除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);
}

如果我在第二个选项卡中调用clearIdleTimeout()，它不会清除前一个选项卡中设置的timeout

Answer 1

选项卡“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

标签“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