将表单序列化到 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，然后在页面重新加载时（例如，在我们关闭并重新打开浏览器后）重新加载之前选择的项目？

我对此的所有想法似乎都不必要地复杂。

我们可能必须为事件“选择单选按钮”分配一个监听器。或者我们应该简单地用“改变”来检测这一点吗？事件？

注意：这解决了 <input type="text"> 的类似问题：自动将所有输入值保存到 localStorage 并在页面重新加载时恢复它们

也许有更简单的方法：

我们能否将整个 <form>状态（输入值、选定的单选按钮等）序列化为localStorage ，并且无需 jQuery 即可轻松恢复它？（无需为文本输入编写特定代码、单选按钮的其他代码、复选框的其他代码等）

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);     }); });

Answer 2

创建辅助函数来检索表单值：https://stackoverflow.com/a/41262933/4988674添加事件监听器以进行表单更改：https://stackoverflow.com/a/10760931/4988674内部事件侦听器将表单数据保存到 localStorage：https://stackoverflow.com/a/2010948/4988674创建“onload”事件并从 localStorage 填充表单值：https://stackoverflow.com/a/7327185/4988674&nbsp;和&nbsp;https ://benalexkeen.com/autofilling-forms-with-javascript/