表单提交前后的Checkbox状态持久化问题

你的问题出在取消Checkbox时的存储逻辑：之前的代码会把取消选中的Checkbox从localStorage里移除，导致页面重新加载时读取不到对应值，JSON.parse(...) || true就会强制把Checkbox设为选中，所以取消的选项又复原了。

正确的做法是：不管用户选中还是取消，都把Checkbox的状态存在localStorage里，而不是移除；页面加载时优先用存储的状态，没有存储记录（首次访问）则默认选中。

修改后的完整代码如下：

<form onsubmit="return saveCheckboxValue();">
  <label for="checkbox1">Option 1</label>
  <input type="checkbox" id="checkbox1">
  <br>
  <label for="checkbox2">Option 2</label>
  <input type="checkbox" id="checkbox2">
  <br>
  <label for="checkbox3">Option 3</label>
  <input type="checkbox" id="checkbox3">
  <br>
  <input type="submit" value="Submit">
</form>

<script>
function saveCheckboxValue() {
  const checkboxes = document.querySelectorAll("input[type='checkbox']");
  
  checkboxes.forEach(checkbox => {
    // 不管是否选中，都存储布尔值
    localStorage.setItem(checkbox.id, checkbox.checked);
  });
  return true;
}

window.onload = function() {
  const checkboxes = document.querySelectorAll("input[type='checkbox']");
  
  checkboxes.forEach(checkbox => {
    // 读取存储的状态，没有则默认true（全选）
    const savedState = localStorage.getItem(checkbox.id);
    checkbox.checked = savedState !== null ? JSON.parse(savedState) : true;
  });
};
</script>

关键修改点： #

• 保存逻辑：把removeItem改成setItem，直接存储Checkbox的checked布尔值，这样取消选中的选项会在localStorage里存"false"，而不是被移除。
• 加载逻辑：判断localStorage里是否有对应记录，没有的话（首次打开页面）设为true（默认全选），有记录则用存储的布尔值，避免了null || true导致的错误复原。

内容的提问来源于stack exchange，提问作者Tetsu93