Jquery 如何仅将更改的复选框保存到本地内存

我完全弄糊涂了。我的代码从外部源加载复选框，然后使用.setitem和.getitem保存/恢复复选框状态。这一切都有效。问题是，我的真实代码有150个复选框，每次用户勾选/取消勾选复选框时，所有复选框都存储在本地内存中，这会减慢速度，您可以从控制台看到这一点。我只希望本地存储保存状态已更改的复选框，而不是保存所有150个复选框。我认为这只需要对.setitem使用一个“if”语句，但我尝试过的方法似乎都不起作用。非常感谢您的任何想法

---

这里有一些简化的方法。它将所有选中复选框的ID收集到单个字符串选择器中，如id1、id2、。。。和存储，然后检索它并将其用作选择器来设置复选框：

原始答复： 更改选择器以仅获取选中的复选框，如$checkbox=$'：checkbox:checked'；并将其移动到on change事件处理程序中，以便在每次调用时刷新它，如下所示：

$function{ 函数LoadExternalCheckboxesAndCode{ var divs\u受\u onChange=$'CountryCheckboxContainer input，YearCheckboxContainer input'l影响 var checkboxValues=JSON.parselocalStorage.getItem'checkboxValues'| |{}； $divs\u受\u onChange.onChange影响，函数{ $checkbox=$'：复选框：选中'； checkboxValues={}； $checkbox.eachfunction{ checkboxValues[this.id]=true； }; localStorage.setItemcheckboxValues、JSON.stringifycheckboxValues； console.logJSON.parselocalStorage.getItem'checkboxValues'； }; //页面加载 $.eachcheckboxValues、functionkey、value{ $+键。属性“已检查”，值； }; }; //清除复选框 MainMenuResetButton.onclick=函数{ localStorage.removeItemcheckboxValues； console.logJSON.parselocalStorage.getItem'checkboxValues'； $'CountryCheckboxContainer标签输入'.prop'checked'，false； $'YearCheckboxContainer标签输入'.prop'checked'，false； }; //从外部文件加载复选框 $获得'https://c2ect538.caspio.com/dp.asp?AppKey=b8a94000b0cf30c15313458e91a0，函数数据{ var$data=$data； $CountryCheckboxContainer.html$data.find'ExternalHTMLCountryStorage'； $YearCheckboxContainer.html$data.find'ExternalHTMLYearStorage'； LoadExternalCheckboxesAndCode；//此调用.setitem和.getitem代码 }; };

---

@高兴的是dd我相信你在这里是正确的，但是当我运行你的代码片段时，当我尝试将其放入fiddle@Silverburch对我来说没有错误你到底看到了什么错误？你能提供一个显示错误的更新的提琴吗？@bleeteddd在你的提琴中执行以下操作。1按“清除”-运行2勾选“奥地利”和“2013”-运行3勾选“阿尔巴尼亚”-运行4直到勾选“阿尔巴尼亚”-运行。我在所有主流浏览器上都看到了“阿尔巴尼亚”。其他组合也会做一些奇怪的事情。@Silverburch啊，我明白了，我忘了调用checkboxValues={}；前循环，固定above@DelightedDDD这真是一种巧妙的编码，我学得很好。非常感谢你的帮助。

https://code.jquery.com/jquery-2.2.3.min.js

<input id="MainMenuResetButton" type="button" value="Clear" />

<div id="CountryCheckboxContainer"></div>
<div id="YearCheckboxContainer"></div>




$(function(){

function LoadExternalCheckboxesAndCode(){

var divs_affected_by_onChange = ('#CountryCheckboxContainer, #YearCheckboxContainer')
var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
$checkboxes = $(":checkbox");

 $(divs_affected_by_onChange).on("change", function(){
    $checkboxes.each(function() {
    checkboxValues[this.id] = this.checked;
  });
  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
      console.log( JSON.parse( localStorage.getItem( 'checkboxValues' ) ) );
});


// On page load
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});
};


// Clear checkboxes
MainMenuResetButton.onclick = function() {

localStorage.removeItem("checkboxValues");
console.log( JSON.parse( localStorage.getItem( 'checkboxValues' ) ) );
$('#CountryCheckboxContainer label input').prop('checked', false);
$('#YearCheckboxContainer label input').prop('checked', false);
};


// Load Checkboxes from external file
$.get('https://c2ect538.caspio.com/dp.asp?AppKey=b8a94000b0cf30c15313458e91a0', function(data){
 var $data= $(data); $("#CountryCheckboxContainer").html($data.find('#ExternalHTMLCountryStorage'));
$("#YearCheckboxContainer").html($data.find('#ExternalHTMLYearStorage'));

LoadExternalCheckboxesAndCode();    //THIS CALLS .setitem() & .getitem() code
});
});

$(function() {

  var $containers = $('#CountryCheckboxContainer, #YearCheckboxContainer');
  $containers.on("change", "input", function() {
    var $checkboxes = $(':checkbox:checked');
    var selected = $(':checkbox:checked').map(function() {
      return this.id;
    }).get();
    selected = '#' + selected.join(',#');
    localStorage.setItem('selected_checkboxes', selected);
    console.log('setting selected ids: ',selected);
  });
 
  // Clear checkboxes
  $('#MainMenuResetButton').click(function() {
    localStorage.removeItem("selected_checkboxes");
    $containers.find(':checkbox').prop('checked', false); 
    console.log('removed selected ids: ');
  }); 
  
  // Load Checkboxes from external file
  $.get('https://c2ect538.caspio.com/dp.asp?AppKey=b8a94000b0cf30c15313458e91a0', function(data) {
    var $data = $(data);
    $("#CountryCheckboxContainer").html($data.find('#ExternalHTMLCountryStorage'));
    $("#YearCheckboxContainer").html($data.find('#ExternalHTMLYearStorage'));  
    var selected = localStorage.getItem('selected_checkboxes'); 
    if (selected && selected != '') $(selected).prop('checked', true);
    console.log('retrieved and set selected ids: ', selected);
  });
});