How to keep my Timer going when the browser is closed

Question

I have a basic timer that I want to leave running while the browser is closed.

Sometimes I will reset it but in general I need it to keep running. Something like tickcounter.com.

The timer is live right now at https://disciplinetimer.netlify.app/

It's working pretty well except for the issue mentioned.

I tried setting up localStorage but that didnt work on Netlify.

Here is the JS code:

var days = 0;
var hours = 0;
var minutes = 0;
var seconds = 0;
var highestDays = 0;
var highestHours = 0;
var highestMinutes = 0;
var highestSeconds = 0;
var appendDays = document.getElementById('days');
var appendHours = document.getElementById('hours');
var appendMinutes = document.getElementById('minutes');
var appendSeconds = document.getElementById('seconds');
var buttonStart = document.getElementById('button-start');
var buttonReset = document.getElementById('button-reset');
var interval; // to store timer values

// Check if there is a saved timer state in local storage
if (localStorage.getItem('timerState')) {
  var timerState = JSON.parse(localStorage.getItem('timerState'));
  days = timerState.days;
  hours = timerState.hours;
  minutes = timerState.minutes;
  seconds = timerState.seconds;
  highestDays = timerState.highestDays;
  highestHours = timerState.highestHours;
  highestMinutes = timerState.highestMinutes;
  highestSeconds = timerState.highestSeconds;
  document.getElementById('last-reset-point').innerText = 'Last reset point: ' + timerState.lastResetPoint;
  document.getElementById('highest-time').innerText = 'Highest time reached: ' + timerState.highestTime;
}

function startTimer() {
  seconds++;

  if (seconds > 59) {
    minutes++;
    seconds = 0;
  }
  if (minutes > 59) {
    hours++;
    minutes = 0;
  }
  if (hours > 23) {
    days++;
    hours = 0;
  }

  // Update the display with leading zeros
  appendDays.innerHTML = (days < 10 ? '0' : '') + days;
  appendHours.innerHTML = (hours < 10 ? '0' : '') + hours;
  appendMinutes.innerHTML = (minutes < 10 ? '0' : '') + minutes;
  appendSeconds.innerHTML = (seconds < 10 ? '0' : '') + seconds;

  // Update highest time if necessary
  if (days > highestDays || (days === highestDays && hours > highestHours) ||
    (days === highestDays && hours === highestHours && minutes > highestMinutes) ||
    (days === highestDays && hours === highestHours && minutes === highestMinutes && seconds > highestSeconds)) {
    highestDays = days;
    highestHours = hours;
    highestMinutes = minutes;
    highestSeconds = seconds;
    var highestTimeStr = highestDays + ':' + (highestHours < 10 ? '0' : '') + highestHours + ':' + (highestMinutes < 10 ? '0' : '') + highestMinutes + ':' + (highestSeconds < 10 ? '0' : '') + highestSeconds;
    document.getElementById('highest-time').innerText = 'Highest time reached: ' + highestTimeStr;

    // Save the timer state to local storage
    var timerState = {
      days: days,
      hours: hours,
      minutes: minutes,
      seconds: seconds,
      highestDays: highestDays,
      highestHours: highestHours,
      highestMinutes: highestMinutes,
      highestSeconds: highestSeconds,
      lastResetPoint: '00:00:00:00', // Reset point set to 00:00:00:00 on start
      highestTime: highestTimeStr,
    };
    localStorage.setItem('timerState', JSON.stringify(timerState));
  }
}

buttonStart.onclick = function() {
  // Clear the interval to avoid multiple timers running
  clearInterval(interval);

  // Start the timer
  interval = setInterval(startTimer, 1000);
};

buttonReset.onclick = function() {
  // Clear the interval to stop the timer
  clearInterval(interval);

  // Reset the timer values
  days = 0;
  hours = 0;
  minutes = 0;
  seconds = 0;
  appendDays.innerHTML = '00';
  appendHours.innerHTML = '00';
  appendMinutes.innerHTML = '00';
  appendSeconds.innerHTML = '00';

  // Start the timer immediately after resetting
  interval = setInterval(startTimer, 1000);

  // Save the timer state to local storage with the new reset point
  var resetPointStr = '00:00:00:00';
  var timerState = {
    days: days,
    hours: hours,
    minutes: minutes,
    seconds: seconds,
    highestDays: highestDays,
    highestHours: highestHours,
    highestMinutes: highestMinutes,
    highestSeconds: highestSeconds,
    lastResetPoint: resetPointStr,
    highestTime: highestDays + ':' + (highestHours < 10 ? '0' : '') + highestHours + ':' + (highestMinutes < 10 ? '0' : '') + highestMinutes + ':' + (highestSeconds < 10 ? '0' : '') + highestSeconds,
  };
  localStorage.setItem('timerState', JSON.stringify(timerState));

  // Update the last reset point display
  document.getElementById('last-reset-point').innerText = 'Last reset point: ' + resetPointStr;
};

<h1>Stopwatch</h1>
<div>
  <span id="days">00</span> Days
  <span id="hours">00</span> Hours
  <span id="minutes">00</span> Minutes
  <span id="seconds">00</span> Seconds
</div>
<button id="button-start">Start</button>
<button id="button-reset">Reset</button>
<p id="last-reset-point"></p>
<p id="highest-time"></p>