Таймер js, django

Проект django. Страница с множеством видео, у каждого своя страница с инфой. При переходе на конкретное видео, необходимо запускать таймер. Сейчас реализация такая Пользователь авторизован > заходит на страницу с 1 видео, добавляется в таблицу в словарь {«1»: «00:00:20»} то есть 20 секунд. Проблема следующая, пользователь перезапускает страницу, таймер обновляется до 0 и заново считает время, необходимо к старому времени добавлять новое

Мой js

document.addEventListener('DOMContentLoaded', function() {
                var movieId = {{ movie.id }};
                var timerStart = new Date().getTime();

                function updateTimer() {
                    var currentTime = new Date().getTime();
                    var timeSpent = Math.floor((currentTime - timerStart) / 1000); // Переводим миллисекунды в секунды
        
                    // Преобразовываем секунды в формат "чч:мм:сс"
                    var hours = Math.floor(timeSpent / 3600);
                    var minutes = Math.floor((timeSpent % 3600) / 60);
                    var seconds = timeSpent % 60;
        
                    var formattedTime = hours.toString().padStart(2, '0') + ':' +
                                        minutes.toString().padStart(2, '0') + ':' +
                                        seconds.toString().padStart(2, '0');
        
                    // Выводим время на странице
                    document.getElementById('timeSpent').innerText = formattedTime;
        
                    // Отправляем данные на сервер с использованием формы
                    sendTimeToServer(movieId, timeSpent);
                }
        
                function sendTimeToServer(movieId, timeSpent) {
                    var updateTimerUrl = '/update_timer/';
                    var formData = new FormData();
                    formData.append('movie_id', movieId);
                    formData.append('time_spent', timeSpent);
        
                    // Создаем и отправляем POST-запрос
                    fetch(updateTimerUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRFToken': getCookie('csrftoken'),
                        },
                        body: formData,
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'success') {
                            console.log('Time successfully sent to server.');
                        } else {
                            console.error('Failed to send time to server.');
                        }
                    })
                    .catch(error => {
                        console.error('Error during the fetch operation:', error);
                    });
                }
        
                // Обновление времени каждую минуту (60 * 1000 миллисекунд)
                setInterval(updateTimer, 60);
            });

Моя модель

class UserStatistics(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
time_spent = models.JSONField(default=dict, blank=True)

Мое представление

@method_decorator(csrf_exempt, name='dispatch')
class MovieDetailView(View):
template_name = 'myapp/movie_detail.html'

def get(self, request, *args, **kwargs):
    movie_id = kwargs.get('movie_id')
    movie = get_object_or_404(Movie, id=movie_id)

    user_statistics = None
    is_watched = False
    time_spent = timedelta(seconds=0)  # Инициализация времени просмотра

    if request.user.is_authenticated:
        user_statistics, created = UserStatistics.objects.get_or_create(user=request.user)

        # Получаем время просмотра текущего фильма
        if movie_id in user_statistics.time_spent:
            time_spent = timedelta(seconds=user_statistics.time_spent[movie_id])

        # Обновляем время просмотра текущего фильма
        time_spent += timedelta(seconds=1)  # Увеличиваем время на 1 секунду
        user_statistics.time_spent[movie_id] = time_spent.total_seconds()
        user_statistics.save()

        is_watched = user_statistics.kmovie.filter(id=movie_id).exists()

    context = {'movie': movie, 'is_watched': is_watched, 'user_statistics': user_statistics, 'time_spent': time_spent}
    return render(request, self.template_name, context)

@csrf_exempt
def update_timer_view(request):
if request.method == 'POST':
    movie_id = request.POST.get('movie_id')
    time_spent = request.POST.get('time_spent')

    if request.user.is_authenticated:
        user_statistics, created = UserStatistics.objects.get_or_create(user=request.user)

        # Обновляем время просмотра текущего фильма в формате "чч:мм:сс"
        hours = int(time_spent) // 3600
        minutes = (int(time_spent) % 3600) // 60
        seconds = int(time_spent) % 60
        formatted_time = f'{hours:02d}:{minutes:02d}:{seconds:02d}'
user_statistics.time_spent[movie_id] = formatted_time
        user_statistics.save()

        return JsonResponse({'status': 'success'})

return JsonResponse({'status': 'error'})