typescript 52 lines · 10 steps

A countdown timer that survives reloads

A TypeScript class persists its deadline to localStorage so a countdown resumes correctly across page reloads.

Explained by highlit

Intermediate persistence timers localstorage state-management classes

1type CountdownState = {
deadline: number;
onTick: (remaining: number) => void;
onComplete: () => void;
5};
6 
7const STORAGE_KEY = "countdown:deadline";
8 
9export class PersistentCountdown {
private intervalId: number | null = null;
private deadline: number;
12 
constructor(private readonly config: Omit<CountdownState, "deadline"> & { durationMs: number }) {
  const stored = localStorage.getItem(STORAGE_KEY);
  const restored = stored ? Number(stored) : NaN;
16 
  this.deadline = Number.isFinite(restored) && restored > Date.now()
    ? restored
    : Date.now() + config.durationMs;
20 
  localStorage.setItem(STORAGE_KEY, String(this.deadline));
}
23 
start(): void {
  if (this.intervalId !== null) return;
  this.tick();
  this.intervalId = window.setInterval(() => this.tick(), 1000);
}
29 
stop(): void {
  if (this.intervalId !== null) {
    window.clearInterval(this.intervalId);
    this.intervalId = null;
  }
}
36 
reset(durationMs: number): void {
  this.deadline = Date.now() + durationMs;
  localStorage.setItem(STORAGE_KEY, String(this.deadline));
}
41 
private tick(): void {
  const remaining = Math.max(0, this.deadline - Date.now());
  this.config.onTick(remaining);
45 
  if (remaining <= 0) {
    this.stop();
    localStorage.removeItem(STORAGE_KEY);
    this.config.onComplete();
  }
}
52}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Storing an absolute deadline instead of a remaining duration lets a timer resume accurately after interruptions.
2Guarding start/stop against a live interval id keeps timer lifecycle idempotent and leak-free.
3Validating restored persisted values before trusting them avoids resuming from stale or corrupt state.

Related explainers

typescript

@Component({
  selector: 'app-article-editor',
  templateUrl: './article-editor.component.html',
})

Autosaving a form with RxJS in Angular

reactive-forms rxjs-operators debouncing

Advanced 8 steps

typescript

type QueuedRequest = {
  id: string;
  url: string;
  method: string;

A retry queue with exponential backoff

retry exponential-backoff persistence

Intermediate 10 steps

typescript

import { Injectable, UnauthorizedException } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';
import { ConfigService } from '@nestjs/config';

How a JWT strategy authenticates in NestJS

authentication jwt passport

Intermediate 7 steps

typescript

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { catchError, filter, take, switchMap } from 'rxjs/operators';

Refreshing auth tokens in an Angular interceptor

http-interceptor token-refresh rxjs

Advanced 8 steps

typescript

import { CanActivate, ExecutionContext, Injectable, UnauthorizedException } from '@nestjs/common';
import { GqlExecutionContext } from '@nestjs/graphql';
import { Reflector } from '@nestjs/core';
import { JwtService } from '@nestjs/jwt';

How a GraphQL auth guard works in NestJS

authentication authorization jwt

Intermediate 7 steps

typescript

type ResizeCallback = (size: { width: number; height: number }) => void;
 
export function observeResize(callback: ResizeCallback, delay = 150) {
  let timeoutId: ReturnType<typeof setTimeout> | undefined;