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

Я сделал таймер с помощью Django и Java Script для подсчета того, сколько часов пользователь работает в компании. Моя проблема в том, что когда я обновляю страницу, таймер останавливается. Мне нужно, чтобы таймер продолжал отсчет в соответствии с датой и временем в часах, когда страница перезагружается, если таймер запущен.

HTML

<link rel="stylesheet" href="../static/css/contador.css" />
<script src="../static/js/contador.js"></script>
{% block content %}

<!--   Main page   -->
<section class="container chrono">
    <!------ Message displaying in a div ------>
    {% if messages %} {% for message in messages %}
    <div class="center">
      <div class="{{ message.tags }}">
        <div>
          {{ message }}
        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
    <div class="row justify-content-center">
        <div class="profile-complete-button col-sm-4 center" id="cronometro">
            <div id="reloj">
              00:00:00
            </div>
            <form name="cron" action="#">
                <input class="btn btn-cron" type="button" value="Iniciar" id="button_1" name="boton1"   />
                <input class="btn btn-cron" type="button" value="Pausar" id="button_2" name="boton2"  /><br/>
            </form>
        </div>
    </div>

</section>


{% endblock %}

JS

if($(this).val() === 'Iniciar') {
        $.ajax({
            url: 'view_contador_start',
            headers: {"X-CSRFToken": getCookie('csrftoken')},
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                'contador_time_start': '00:00:00',
                'chrono_date': WithoutTime()
            }),
            dataType: "json",
            cache: false,
            success: function (response) {
                console.log(response)
            }
        });
```
Django
```
def view_contador_start(request):
    """View to display the counter"""
    print('body', request.body)
    chrono_data_start = json.loads(request.body)

    if request.method == "POST":
        request.user.username
        chrono_timer = chrono_data_start['contador_time_start']
        date_in_chrono = chrono_data_start['chrono_date']

        try:
            startForm = ChronoForm()
            startOption = startForm.save(commit=False)
            startOption.username = request.user.username
            startOption.date_chrono = date_in_chrono
            startOption.chrono_start = datetime.today().strftime('%H:%M')
            startOption.chrono_fin = None
            startOption.chrono_timer_fin = chrono_timer
            startOption.chrono_hours = float(0)
            startOption.totalHours = startOption.chrono_hours
            startOption.save()
        except Exception as err:
            messages.error(
                request, "Oops! Algo ha fallado.", extra_tags="alert-danger"
            )
            print("error chrono start: {0}".format(err))

    else:
        return render(request, "contador.html")

    return JsonResponse({"username": startOption.username,
                         "chrono_fin": startOption.chrono_fin,
                         "date_chrono": startOption.date_chrono,
                         })
```

Вернуться на верх