我有一個 <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，然后在頁面重新加載時（例如，在我們關閉并重新打開瀏覽器后）重新加載之前選擇的項目？我對此的所有想法似乎都不必要地復雜。我們可能必須為事件“選擇單選按鈕”分配一個監聽器?；蛘呶覀儜摵唵蔚赜谩案淖儭眮頇z測這一點嗎？事件？注意：這解決了 <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 關注
- 191 瀏覽
添加回答
舉報
0/150
提交
取消