Почему поле с атрибутом disabled не сохраняет введенные в него данные при шаге назад в браузере после отправки данных?

Question

[weranda]

Приветствую.

Есть простейшая форма, вот код + codepen:

<script>
var field1 = document.querySelector("#field1")
var field2 = document.querySelector("#field2")

field1.addEventListener('focus', function (e) {
    field2.removeAttribute("disabled")
})
</script>
<form action="/" method="POST">
    <input id="field1" name="field1" required="" type="text" value="">
    <input disabled="disabled" id="field2" name="field2" type="text" required="" value="">
    <input id="submit" name="submit" type="submit" value="Сохранить">
</form>

Поле №1 разблокировано. Поле №2 с атрибутом disabled. После клика/фокуса в поле №1 поле №2 разблокируется через JS и в него можно вводить данные. Ввожу данные, сохраняю данные по кнопке, данные сохраняются нормально, но если в браузере сделать шаг назад, тогда в поле №1 остается введенное значение, а в поле №2 значения нет. Объясните, пожалуйста, почему так происходит и какие варианты существуют, чтобы если в поле №2 введены данные, то они там и оставались точно такими же, как и в поле №1.

Вот так это выглядит: