我有一个 <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 即可轻松恢复它？（无需为文本输入编写特定代码、单选按钮的其他代码、复选框的其他代码等）
1 回答
慕慕森
TA贡献1856条经验 获得超17个赞
这是单选按钮的解决方案：
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);
});
});
守候你守候我
TA贡献1802条经验 获得超10个赞
创建辅助函数来检索表单值：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 和 https ://benalexkeen.com/autofilling-forms-with-javascript/
- 1 回答
- 0 关注
- 51 浏览
添加回答
举报
0/150
提交
取消