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

Question

我让自己完全糊涂了。我的代码从外部源加载复选框，然后使用.setitem（）和.getitem（）来保存/恢复复选框状态。这一切都有效。问题是我的真实代码有150个复选框，每次用户勾选/取消选中复选框时，所有复选框都存储在本地内存中，这会减慢速度（可以从控制台看到）。我只是希望本地存储保存已更改状态的复选框，而不是保存所有150个。我认为这只需要.setitem（）的'if'语句，但我尝试过的任何东西似乎都没有用。任何想法都非常感激。 https://jsfiddle.net/bk50ymv9/

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
});
});

Answer 1

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

working jsFiddle

$(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);
  });
});

原始答案：

更改您的选择器以仅抓取已选中的复选框（如$checkboxes = $(':checkbox:checked');）并移动它以使其位于on change事件处理程序中，以便在每次调用时刷新它，如下所示：

working jsFiddle

$(function() {

  function LoadExternalCheckboxesAndCode() {
    var divs_affected_by_onChange = $('#CountryCheckboxContainer input, #YearCheckboxContainer input')l
    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};


    $(divs_affected_by_onChange).on("change", function() {
      $checkboxes = $(':checkbox:checked');
      checkboxValues = {};
      $checkboxes.each(function() {
        checkboxValues[this.id] = true;
      });
      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
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="MainMenuResetButton" type="button" value="Clear" />

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