Return the previous values in the form when the button is clicked (Javascript)

I have the following form shown below. I would like that when you click on the Cancel changes button the values of the fields return to the previous ones.

For example, if I have the word John and I delete hn (thus having Jo), clicking on the button I would like it to return to John.

How can I do this?

<form >
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Cancel changes">
</form>