How to make this timer start itself soon as page loads

How can this particular code work on page load itself and even on refresh of page timer value remains ticking only when click submit it stops?

I guess we need to store the timer on localStorage and destroy storage on click submit?

$(function() {

  // Some global variables
  var startTime = 0,
    elapsed = 0,
    timerId = 0,
    $timer = $("#timer");

  function formatTime(time) {
    var hrs = Math.floor(time / 60 / 60 / 1000),
      min = Math.floor((time - hrs * 60 * 60 * 1000) / 60 / 1000),
      sec = Math.floor((time - hrs * 60 * 60 * 1000 - min * 60 * 1000) / 1000);

    hrs = hrs < 10 ? "0" + hrs : hrs;
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;

    return hrs + ":" + min + ":" + sec;
  }

  function elapsedTimeFrom(time) {
    return formatTime(time - startTime + elapsed);
  }

  function showElapsed() {
    $timer.text(elapsedTimeFrom(Date.now()));
  }

  function startTimer() {
    // React only if timer is stopped
    startTime = startTime || Date.now();
    timerId = timerId || setInterval(showElapsed, 1000);
    localStorage.setItem('startTime');
  }

  function pauseTimer() {
    // React only if timer is running
    if (timerId) {
      clearInterval(timerId);
      elapsed += Date.now() - startTime;
      startTime = 0;
      timerId = 0;
    }
  }

  function resetTimer() {
    clearInterval(timerId);
    $timer.text("00:00:00");
    startTime = 0;
    elapsed = 0;
    timerId = 0;
  }

  function editTimer() {
    pauseTimer();
    $timer.prop("contenteditable", true);
    $timer.css("border", "1px solid red");
  }

  function setElapsed() {
    var time = $timer.text(),
      arr = time.split(":");
    $timer.prop("contenteditable", false);
    $timer.css("border", "1px solid black");
    elapsed = parseInt(arr[0] * 60 * 60, 10);
    elapsed += parseInt(arr[1] * 60, 10);
    elapsed += parseInt(arr[2], 10);
    elapsed *= 1000;
  }

  function sendTime() {
    pauseTimer();
    // Set hidden input value before send
    $("[name='time']").val(formatTime(elapsed));
  }

  $("[name='start']").click(startTimer);
  $("[name='stop']").click(pauseTimer);
  $("[name='reset']").click(resetTimer);
  $timer.dblclick(editTimer);
  $timer.blur(setElapsed);
  $("form").submit(sendTime);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer">00:00:00</div>
</h1>
<form action="" method="post" ame="xyz">
  <input type="button" name="start" value="Start" class="btn btn-primary mb-2">
  <input type="button" name="stop" value="Stop" class="btn btn-primary mb-2">
  <input type="submit" name="action" value="Submit" class="btn btn-primary mb-2">
  <input type="hidden" name="time" value="00:00:00">
</form>

Answer

You need to set the variable in localStorage not just the name

I have commented out the calls since they do not work in StackSnippets

Just uncomment them when you copy to your server.

$(function() {

  // Some global variables
  var startTime = 0;
    elapsed = 0,
    timerId = 0,
    $timer = $("#timer");

  function formatTime(time) {
    var hrs = Math.floor(time / 60 / 60 / 1000),
      min = Math.floor((time - hrs * 60 * 60 * 1000) / 60 / 1000),
      sec = Math.floor((time - hrs * 60 * 60 * 1000 - min * 60 * 1000) / 1000);

    hrs = hrs < 10 ? "0" + hrs : hrs;
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;

    return hrs + ":" + min + ":" + sec;
  }

  function elapsedTimeFrom(time) {
    return formatTime(time - startTime + elapsed);
  }

  function showElapsed() {
    $timer.text(elapsedTimeFrom(Date.now()));
  }

  function startTimer() {
    // React only if timer is stopped
//    startTime = localStorage.getItem('startTime') || Date.now();
    startTime || Date.now(); // remove and uncomment above
    timerId = timerId || setInterval(showElapsed, 1000);
    // localStorage.setItem('startTime',startTime);
  }

  function pauseTimer() {
    // React only if timer is running
    if (timerId) {
      clearInterval(timerId);
      elapsed += Date.now() - startTime;
      startTime = 0;
      timerId = 0;
    }
  }

  function resetTimer() {
    clearInterval(timerId);
    $timer.text("00:00:00");
    startTime = 0;
    elapsed = 0;
    timerId = 0;
  }

  function editTimer() {
    pauseTimer();
    $timer.prop("contenteditable", true);
    $timer.css("border", "1px solid red");
  }

  function setElapsed() {
    var time = $timer.text(),
      arr = time.split(":");
    $timer.prop("contenteditable", false);
    $timer.css("border", "1px solid black");
    elapsed = parseInt(arr[0] * 60 * 60, 10);
    elapsed += parseInt(arr[1] * 60, 10);
    elapsed += parseInt(arr[2], 10);
    elapsed *= 1000;
  }

  function sendTime() {
    pauseTimer();
    // Set hidden input value before send
    $("[name='time']").val(formatTime(elapsed));
    // localStorage.removeItem('startTime');
  }

  $("[name='start']").click(startTimer);
  $("[name='stop']").click(pauseTimer);
  $("[name='reset']").click(resetTimer);
  $timer.dblclick(editTimer);
  $timer.blur(setElapsed);
  $("form").submit(sendTime);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer">00:00:00</div>
</h1>
<form action="" method="post" ame="xyz">
  <input type="button" name="start" value="Start" class="btn btn-primary mb-2">
  <input type="button" name="stop" value="Stop" class="btn btn-primary mb-2">
  <input type="submit" name="action" value="Submit" class="btn btn-primary mb-2">
  <input type="hidden" name="time" value="00:00:00">
</form>