页面重载时如何保存复选框值？

页面重载时，可以通过以下几种方法来保存复选框的值：

使用浏览器的本地存储（localStorage或sessionStorage）：在复选框的change事件中，将复选框的值存储在本地存储中，然后在页面重载时，从本地存储中读取这些值，并将其设置回相应的复选框。可以使用以下代码示例：

// 保存复选框的值到本地存储
function saveCheckboxValues() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < checkboxes.length; i++) {
    localStorage.setItem(checkboxes[i].id, checkboxes[i].checked);
  }
}

// 从本地存储中读取复选框的值，并设置回复选框
function loadCheckboxValues() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < checkboxes.length; i++) {
    var value = localStorage.getItem(checkboxes[i].id);
    if (value !== null) {
      checkboxes[i].checked = (value === 'true');
    }
  }
}

// 在复选框的change事件中调用保存函数
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', saveCheckboxValues);
}

// 页面加载时调用加载函数
window.addEventListener('load', loadCheckboxValues);

使用cookie：在复选框的change事件中，将复选框的值存储在cookie中，然后在页面重载时，从cookie中读取这些值，并将其设置回相应的复选框。可以使用以下代码示例：

// 保存复选框的值到cookie
function saveCheckboxValues() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  for (var i = 0; i < checkboxes.length; i++) {
    document.cookie = checkboxes[i].id + '=' + checkboxes[i].checked;
  }
}

// 从cookie中读取复选框的值，并设置回复选框
function loadCheckboxValues() {
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim().split('=');
    var checkbox = document.getElementById(cookie[0]);
    if (checkbox !== null) {
      checkbox.checked = (cookie[1] === 'true');
    }
  }
}

// 在复选框的change事件中调用保存函数
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', saveCheckboxValues);
}

// 页面加载时调用加载函数
window.addEventListener('load', loadCheckboxValues);

使用URL参数：在复选框的change事件中，将复选框的值作为URL参数的一部分，然后在页面重载时，从URL参数中读取这些值，并将其设置回相应的复选框。可以使用以下代码示例：

// 更新URL参数
function updateUrlParams() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var params = new URLSearchParams(window.location.search);
  checkboxes.forEach(function(checkbox) {
    if (checkbox.checked) {
      params.set(checkbox.id, 'true');
    } else {
      params.delete(checkbox.id);
    }
  });
  var newUrl = window.location.pathname + '?' + params.toString();
  window.history.replaceState(null, null, newUrl);
}

// 从URL参数中读取复选框的值，并设置回复选框
function loadCheckboxValues() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  var params = new URLSearchParams(window.location.search);
  checkboxes.forEach(function(checkbox) {
    if (params.has(checkbox.id)) {
      checkbox.checked = true;
    } else {
      checkbox.checked = false;
    }
  });
}

// 在复选框的change事件中调用更新函数
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', updateUrlParams);
});

// 页面加载时调用加载函数
window.addEventListener('load', loadCheckboxValues);

以上是三种常见的方法来保存复选框的值，在页面重载时恢复复选框的状态。具体选择哪种方法取决于你的需求和技术栈。