如何保持过滤器按钮中特定复选框的状态

<input type="checkbox" id="filter1" />
<label for="filter1">Filter 1</label>

<input type="checkbox" id="filter2" />
<label for="filter2">Filter 2</label>

<input type="checkbox" id="filter3" />
<label for="filter3">Filter 3</label>

// 监听复选框状态变化
document.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
  checkbox.addEventListener('change', handleCheckboxChange);
});

// 处理复选框状态变化
function handleCheckboxChange(event) {
  var selectedFilters = [];

  // 获取选中的复选框
  document.querySelectorAll('input[type="checkbox"]:checked').forEach(function(checkbox) {
    selectedFilters.push(checkbox.id);
  });

  // 存储选中的复选框状态（可以使用localStorage或其他方式）
  localStorage.setItem('selectedFilters', JSON.stringify(selectedFilters));
}

// 页面加载时，恢复之前选中的复选框状态
window.addEventListener('load', function() {
  var selectedFilters = JSON.parse(localStorage.getItem('selectedFilters'));

  if (selectedFilters) {
    selectedFilters.forEach(function(filter) {
      document.getElementById(filter).checked = true;
    });
  }
});