Rails 5.2: держать всплывающее окно открытым при навигации по другим страницам

Question

У меня довольно простой таймер JS в моем приложении Rails, но я пытаюсь сделать его всплывающим, но остаюсь открытым (вроде окна чата), когда пользователь уходит со страницы таймера .

Я знаю, что JS на стороне клиента и, следовательно, перезагружается, когда пользователь меняет страницы, но я отказываюсь верить, что нет способа сделать это!

I ' Мы смотрели на посты типа this (разные языки программирования) и this (в лучшем случае pessimisti c), но не могли найти ничего реализуемого. Я не ищу, чтобы кто-то сделал это для меня, но любой, кто мог бы указать мне правильное направление, был бы очень признателен!

Таймер в настоящее время имеет такую ​​структуру:

<main class="nav-pad my-5">

  <header class="text-center">
    <h1>Grill Timer</h1>
  </header>

  <section class="text-center">
    <p>Input a number of minutes and hit start!</p>
    <div id="inputArea"></div>
    <h2 id="time" class="display-2 color-red">0:00</h2>
  </section>

</main>


<audio controls class="hidden">
  <source src="https://manlyartofbbq.s3-us-west-1.amazonaws.com/Sounds/notification-sound.mp3" type="audio/mpeg">
</audio>


<script>
  // two global variables
  var secondsRemaining;
  var intervalHandle;
  var $audio = $('audio');
  var audio = $audio[0];

  function resetPage() {
      document.getElementById("inputArea").style.display = "block";
  }

  function tick() {
      // grab the h1
      var timeDisplay = document.getElementById("time");

      // turn seconds into mm:ss
      var min = Math.floor(secondsRemaining / 60);
      var sec = secondsRemaining - (min * 60);

      // add a leading zero (as a string value) if seconds less than 10
      if (sec < 10) {
          sec = "0" + sec;
      }
      // concatenate with colon
      var message = min + ":" + sec;
      // now change the display
      timeDisplay.innerHTML = message;

      // stop if down to zero
      if (secondsRemaining === 0) {
          audio.play();
          alert("Done!");
          clearInterval(intervalHandle);
          resetPage();
      }
      // subtract from seconds remaining
      secondsRemaining--;
  }

  function startCountdown() {
      // get contents of the "minutes" text box
      var minutes = document.getElementById("minutes").value;
      // check if not a number
      if (isNaN(minutes)) {
          alert("Please enter a number!");
          return;
      }
      // how many seconds?
      secondsRemaining =  minutes * 60;
      // every second, call the "tick" function
      intervalHandle = setInterval(tick, 1000);
      // hide the form
      <!-- document.getElementById("inputArea").style.display = "none"; -->
  }

  // as soon as the page is loaded...
  $(document).ready(function() {
    // create input text box and give it an id of "minutes"
      var inputMinutes = document.createElement("input");
      inputMinutes.setAttribute("id", "minutes");
      inputMinutes.setAttribute("type", "text");
      // create a button
      var startButton = document.createElement("input");
      startButton.setAttribute("type", "button");
      startButton.setAttribute("value", "Start Countdown");
      startButton.onclick = function () {
          startCountdown();
      };
      // add to the DOM, to the div called "inputArea"
      document.getElementById("inputArea").appendChild(inputMinutes);
      document.getElementById("inputArea").appendChild(startButton);
  });
</script>

Любая помощь приветствуется, чтобы попытаться понять это!