Undo di un form

[Marcolino's]

Buongiorno mondo

Una semplice domanda, come posso gestire l'UNDO in un form dopo l'annullamento dello stesso?
Avevo pensato ad un salvataggio dei campi in un localStorage e poi col tasto UNDO riprendere i dati e ripresentarli.

<form id="form-invio">
<input type="text" id="nome" name="nome" value="Mario">
<button type="submit" name="salva">SALVA</button>
<button type="button" id="annulla">Annulla</button>
<button type="button" id="undo" disabled>UNDO</button>
</form>

const formInvio = document.getElementById('form-invio');
const btnAnnulla = document.getElementById('annulla');
const btnUndo = document.getElementById('undo');
const txtNome= document.getElementById('nome');

btnAnnulla.addEventListener('click', () => {
  localStorage.setItem('nome', txtNome.value);
  formInvio.reset();
  btnUndo.removeAttribute('disabled');
});

btnUndo.addEventListener('click', () => {
  txtNomeValue = localStorage('nome');
  localStorage.clear();
  btnUndo.setAttribute('disabled', true);
});

Pensavo ad una cosa del genere, ovviamente qui l'esempio è semplicistico, in un form complesso con decine di campi (è il mio caso) il codice deve essere ripensato in modo da evitare risondanze di elementi.

Già la semplice serie di costanti nell'esempio è ridondante e nella realtà avrei utilizzato querySelector() per dire.