Angular: recuperando os dados de uma página após um recarregamento

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class EstadoService {
  salvar(chave: string, valor: string): void {
    localStorage.setItem(chave, valor);
  }

  obter(chave: string): string | null {
    return localStorage.getItem(chave);
  }

  limpar(chave: string): void {
    localStorage.removeItem(chave);
  }
}

import { CommonModule } from '@angular/common';
import {
  Component,
  inject,
  OnDestroy,
  OnInit,
} from '@angular/core';
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
} from '@angular/forms';
import { debounceTime, Subscription } from 'rxjs';
import { EstadoService } from '../estado.service';

const CHAVE_FORM_EXEMPLO = 'teste';

@Component({
  selector: 'app-formulario-exemplo',
  templateUrl: './formulario-exemplo.component.html',
  imports: [CommonModule, ReactiveFormsModule],
})
export class FormularioExemploComponent
  implements OnInit, OnDestroy {
  private readonly estadoService = inject(EstadoService);
  private formularioSubscription!: Subscription;
  formulario: FormGroup = new FormGroup({
    texto: new FormControl<string>('', {
      nonNullable: true,
    }),
    select: new FormControl<string>('', {
      nonNullable: true,
    }),
    radio: new FormControl<string>('', {
      nonNullable: true,
    }),
    checkbox: new FormControl<string>('', {
      nonNullable: true,
    }),
  });

  ngOnInit(): void {
    this.carregarEstadoPagina();
    this.monitorarSalvarEstadoPagina();
  }

  ngOnDestroy(): void {
    this.formularioSubscription.unsubscribe();
  }

  limparFormulario() {
    this.formulario.reset();
    this.estadoService.limpar(CHAVE_FORM_EXEMPLO);
  }

  /**
   * Verifica se existe um estado salvo anteriormente.
   * Caso exista, é efetuado o parse do valor e atribuido
   * ao `formulario`:
   */
  private carregarEstadoPagina(): void {
    const dadosFormulario = this.estadoService.obter(
      CHAVE_FORM_EXEMPLO,
    );

    if (dadosFormulario === null) {
      return;
    }

    try {
      const objDadosForm = JSON.parse(dadosFormulario);
      this.formulario.patchValue(objDadosForm);
    } catch {
      this.estadoService.limpar(CHAVE_FORM_EXEMPLO);
    }
  }

  /**
   * Sempre que o `formulario` sofre alguma alteração,
   * pegamos seu valor e salvamos.
   */
  private monitorarSalvarEstadoPagina(): void {
    this.formularioSubscription =
      this.formulario.valueChanges
        // Aguarda 500ms após a última alteração de valor
        // antes de emitir o evento no `subscribe`.
        .pipe(debounceTime(500))
        .subscribe(() => {
          // O método `getRawValue()` retorna todos os
          // valores do formulário, incluindo os campos
          // desabilitados.
          const formValue = this.formulario.getRawValue();
          this.estadoService.salvar(
            CHAVE_FORM_EXEMPLO,
            JSON.stringify(formValue),
          );
        });
  }
}

<h1>Formulário de Teste</h1>
<div>
  <form [formGroup]="formulario">
    <div>
      <input
        placeholder="campo 1..."
        formControlName="texto" />
    </div>
    <div>
      <select formControlName="select">
        <option value=""></option>
        <option value="1">Valor 1</option>
        <option value="2">Valor 2</option>
      </select>
    </div>
    <div>
      <input
        formControlName="radio"
        type="radio"
        value="radio1" />
      Radio 1
    </div>
    <div>
      <input
        formControlName="radio"
        type="radio"
        value="radio2" />
      Radio 2
    </div>
    <div>
      <input
        formControlName="radio"
        type="radio"
        value="radio3" />
      Radio 3
    </div>
    <div>
      <input type="checkbox" formControlName="checkbox" />
    </div>
    <div>
      <button type="submit">Enviar</button>
      <button (click)="limparFormulario()" type="reset">
        Limpar
      </button>
    </div>
  </form>
</div>
<div>
  <!-- 
    O JSONPipe funciona como o JSON.stringify(). Para
    utilizá-los é necessário importar o CommonModule.
  -->
  <pre>{{ formulario.value | json }}</pre>
</div>