将表单序列化到 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

1. 创建辅助函数来检索表单值：https://stackoverflow.com/a/41262933/4988674

2. 添加事件监听器以进行表单更改：https://stackoverflow.com/a/10760931/4988674

3. 内部事件侦听器将表单数据保存到 localStorage：https://stackoverflow.com/a/2010948/4988674

4. 创建“onload”事件并从 localStorage 填充表单值：https://stackoverflow.com/a/7327185/4988674 和 https ://benalexkeen.com/autofilling-forms-with-javascript/