How to execute angular function one time and leave it also after reload component

Im learning angular and facing following question - if i understand right - all what i put in ngOnInit, is executed on each component reload. I have timer function, which needs to keep running also if page is reloaded, not start new count. How can i execute function startTimer(secsToStart: number) outside ngOnInit, or in HTML, or there is other angular feature i need to look into.

The component code:

@Component({
  selector: 'app-task-countdown',
  templateUrl: './task-countdown.component.html',
  styleUrls: ['./task-countdown.component.css'],
})
export class TaskCountdownComponent implements OnInit {
  @Input()
  tasks!: Tasks[];
  excuse!: Loosers[];
  excuseForm!: FormGroup;
  expirationCounter!: string;
  timeIsUp = false;
  donePushed = false;


  constructor(
    private fb: FormBuilder,
    private tasksService: TasksService,
    private excuseService: ExcuseService,
    private router: Router
  ) {}

  ngOnInit() {
    this.tasks = this.tasksService.getTasks();
    this.startTimer(86400);
    this.excuseForm = this.fb.group({
      excuse: '',
    });
    
    this.excuseForm.valueChanges.subscribe(console.log);
  }

  addExcuse() {
    const excuseValue = this.excuseForm.value;
    this.excuseService.addExcuse(excuseValue);
    this.router.navigate(['/loosers']);
  }

  onTaskDone() {
    this.donePushed = true;
  }


  startTimer(secsToStart: number): void {
    var start: number = secsToStart;
    var h: number;
    var m: number;
    var s: number;
    var temp: number;
    var timer: any = setInterval(() => {
      h = Math.floor(start / 60 / 60);
      temp = start - h * 60 * 60;
      m = Math.floor(temp / 60);
      temp = temp - m * 60;
    
      s = temp;

      var hour = h < 10 ? '0' + h : h;
      var minute = m < 10 ? '0' + m : m;
      var second = s < 10 ? '0' + s : s;

      this.expirationCounter = hour + ':' + minute + ':' + second;

      if (start <= 0) {
        clearInterval(timer);
        this.expirationCounter = 'Expired';
        this.timeIsUp = true;
        this.tasks = [];
      } else if (this.donePushed) {
        clearInterval(timer);
        console.log(start);
      }
      start--;
    }, 1000);
  }
}

The html part, the timer is executed in span as expirationCounter:

<app-nav-bar></app-nav-bar>

<div *ngFor="let tasks of tasks">
  <p>{{ tasks.task }}</p>
  <button (click)="onTaskDone()">Done</button>
</div>

<div>
  <span id="myTimeCounter">{{ expirationCounter }}</span>
</div>
<div *ngIf="this.timeIsUp">
  <form [formGroup]="excuseForm">
    <input
      type="text"
      placeholder="write down your excuses .. "
      formControlName="excuse"
    />
    <button (click)="addExcuse()">Add</button>
  </form>
</div>

When you reload the page angular losses all informations hat has been gathered (like the current count state).

You should consider saving the current count in localstorage on each count and load it from there when the page/components load.

// write
let mycount: number = 5;
localStorage.setItem("countvalue", String("5"));

// read
let mycount: string = localStorage.setItem("countvalue");