Сериализация формы в localStorage / восстановление ее после перезагрузки страницы (без jQuery)

Question

У меня есть <form> с несколькими группами переключателей:

<form>
Group 1: 
<input type='radio' name='a' value='1'>
<input type='radio' name='a' value='2'>
<input type='radio' name='a' value='3'><br>
Group 2: 
<input type='radio' name='b' value='1'>
<input type='radio' name='b' value='2'>
<input type='radio' name='b' value='3'>
</form>

Как сохранить при каждом событии изменения выбора все до localStorage, а затем при перезагрузке страницы (например, после закрытия и повторного открытия браузера) перезагрузить ранее выбранные элементы?

Все, что я думаю для этого, кажется излишне сложным.

Мы, вероятно, должны назначить слушателя для события «переключатель выбран», или мы должны обнаружить это просто с событием "change"?

NB: Это решает аналогичную проблему для <input type="text">: Автоматическое сохранение всех входных значений в localStorage и восстановление их при перезагрузке страницы

Может быть, есть более простой способ:

Можем ли мы сериализовать состояние целом <form> (входные значения, выбранные переключатели и т. Д. c.) В localStorage и легко восстановить его, без jQuery? (без необходимости писать указанный c код для ввода текста, другой код для переключателей, другой код для флажков и т. д. c.)

Answer 1

Это решение для переключателей:

document.querySelectorAll('input[type="radio"]').forEach(elt => { 
    if (localStorage.getItem(elt.name) == elt.value) 
        elt.checked = true; 
    elt.addEventListener("change", e => { 
        localStorage.setItem(e.target.name, e.target.value); 
    }); 
});

Это работает для текста <input>: Автоматическое сохранение всех значений ввода в localStorage и восстановление их при перезагрузке страницы .

Answer 2

1. Создание вспомогательной функции для извлечения значений формы: { ссылка }

2. Добавление прослушивателя событий для изменений формы: { ссылка }

3. Внутренний слушатель событий сохраняет данные формы в localStorage: { ссылка }

4. Создать "onload" "событие и заполнить значения формы из localStorage: { ссылка } и https://benalexkeen.com/autofilling-forms-with-javascript/