我有一個 <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>如何在每次選擇更改事件時將所有內(nèi)容保存到localStorage，然后在頁面重新加載時（例如，在我們關(guān)閉并重新打開瀏覽器后）重新加載之前選擇的項目？我對此的所有想法似乎都不必要地復(fù)雜。我們可能必須為事件“選擇單選按鈕”分配一個監(jiān)聽器?；蛘呶覀儜?yīng)該簡單地用“改變”來檢測這一點嗎？事件？注意：這解決了 <input type="text"> 的類似問題：自動將所有輸入值保存到 localStorage 并在頁面重新加載時恢復(fù)它們也許有更簡單的方法：我們能否將整個 <form>狀態(tài)（輸入值、選定的單選按鈕等）序列化為localStorage ，并且無需 jQuery 即可輕松恢復(fù)它？（無需為文本輸入編寫特定代碼、單選按鈕的其他代碼、復(fù)選框的其他代碼等）
1 回答
慕慕森
TA貢獻(xiàn)1856條經(jīng)驗 獲得超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貢獻(xiàn)1802條經(jīng)驗 獲得超10個贊
創(chuàng)建輔助函數(shù)來檢索表單值：https://stackoverflow.com/a/41262933/4988674
添加事件監(jiān)聽器以進(jìn)行表單更改：https://stackoverflow.com/a/10760931/4988674
內(nèi)部事件偵聽器將表單數(shù)據(jù)保存到 localStorage：https://stackoverflow.com/a/2010948/4988674
創(chuàng)建“onload”事件并從 localStorage 填充表單值：https://stackoverflow.com/a/7327185/4988674 和 https ://benalexkeen.com/autofilling-forms-with-javascript/
- 1 回答
- 0 關(guān)注
- 211 瀏覽
添加回答
舉報
0/150
提交
取消