Отображение таймера сеанса Java-скрипта для нескольких вкладок

Вы можете использовать API PostMessage для связи между окнами.
Или вы также можете использовать LocalStorage и его событие «хранилище».

const EL_text = document.getElementById("timerText");
let remaining = 30;
let remainingItv = null;

function Decrement() {  // Just a simplification - example
  remaining -= 1;
  localStorage.remaining = remaining;  // Store the time
}

window.addEventListener("storage", () => {

  EL_text.textContent = localStorage.remaining;    // Use the value here!

  if (localStorage.remaining == "0") {
    localStorage.removeItem("remaining"); // Remove key from localStorage
    clearInterval(remainingItv);
  }
});

// Init!
// Only initiate of there's no "remaining" key inside localStorage
if (undefined === localStorage.remaining) {
  remainingItv = setInterval(Decrement, 1000);
}

Определите свое время в локальном хранилище браузера и тогда оно будет доступно на всех вкладках/окнах

Просто извлеките значение таймера из локального хранилища при обновлении страницы и, если оно не существует, создайте его и сохраните в локальном хранилище.

1. Хранение объектов в HTML5 localStorage
2. localstorage и setInterval() с несколькими вкладками
3. обменивайтесь данными между вкладками браузера с помощью localstorage

Вы можете сохранить текущее значение (время) таймера для каждой вкладки в localStorage каждые N интервалов, в зависимости от таймфрейма, а затем, когда/если откроется новая вкладка, она будет получать «последнее» значение таймера.

Прежде всего, вы никогда не должны полагаться на setTimeout() для отображения времени, так как это не точно. Они выполняются в одном потоке с другими операциями, и они будут сильно отклоняться, если для выполнения других операций потребуется время.

Пока я пишу этот ответ, уже есть несколько хороших ответов, опубликованных разными полезными участниками, но это просто ответы только по ссылкам.

Одним из распространенных решений является использование поддержки серверных технологий, но помимо очевидного, если вы собираетесь полагаться только на решение javascript, вам нужно будет записать временную метку в какое-то хранилище браузера или файлы cookie. Затем вычислите разницу между текущим временем и начальной отметкой времени, чтобы показать таймер сеанса.

ПРИМЕЧАНИЕ. Следующий пример будет работать только в размещенной среде, поскольку он зависит от той же политики происхождения. Выполнение в консоли разработчика не будет работать.

var startTime;
if (sessionStorage) {
  // Ask other tabs for session storage
  localStorage["getTmestamp"] = "get";

  window.addEventListener("storage", (event) => {
    if (event.key == "getTmestamp") {
      // Some tab asked for the sessionStorage -> send it
      localStorage["timestamp"] = sessionStorage["timestamp"];
      localStorage.removeItem("getTmestamp");
    } else if (event.key == "timestamp" && !sessionStorage["timestamp"]) {
      sessionStorage["timestamp"] = new Date(localStorage["timestamp"]);
      localStorage.removeItem("timestamp");
    }
  });
} else {
  console.warn("Browser doesn't support sessionStorage");
}
var interval = setInterval(() => {
  if (!startTime && sessionStorage && !sessionStorage["timestamp"]) {
    sessionStorage["timestamp"] = new Date();
  }
  startTime = new Date(sessionStorage["timestamp"]);
  var currentTime = new Date();
  var timeElapsed = Math.ceil((currentTime - startTime) / 1000);
  var remainingTime = 30 - timeElapsed;
  if (remainingTime <= 0) {
    console.info("Timeout");
    clearInterval(interval);
  }
  console.info("Session Time in seconds:", timeElapsed);
  console.info("Remaining Session Time in seconds:", remainingTime);
}, 500);