title: Keeping the radio button checked after cached using JSON
body: <p>Here is my Function code: </p>
  
  <pre><code>var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};
  
  jQuery(document).ready(function() {
      jQuery("input[name='GLOVE']").click(function() {
  
          jQuery('input[type="radio"][data-default="1"]').each(function() {
              var key = jQuery(this).attr("name");
              var value = jQuery("input[name='" + key + "']:checked").val() 
                        ? jQuery("input[name='" + key + "']:checked").val() 
                        : null;
              if (key != "GLOVE") {
                  checkboxValues[this.id] = value;
              }
          });
  
          localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
          jQuery.each(checkboxValues, function(key, value) {
              if (key != "option-5b2089bd80038" || key != "cboption-5b2089bd9d11b") {
                  console.log(key + " " + value);
                  jQuery("#" + key).prop('checked', value);
              }
          });
      });
  });
  
  
  jQuery.each(checkboxValues, function(key, value) {
      if (key != "option-5b2089bd80038") {
          console.log(key + " " + value);
          jQuery("#" + key).prop('checked', value);
      }
  });
  </code></pre>
  
  <p>The Value are already saving in the console but the Buttons are not remaining to be checked after cached.</p>
  
  <p>in this part I use condition logic in product builder (wordpress), so there are two main button, front and back, when I click "front" these colors will show up (also in back), so the thing is when I pick a color and go to "back" the color should stay when I click the "Front" again. in the condition logic I made that if I click "Front" the components of Back will be hiden and vice versa.</p>
  
  <p>here is the sample image of the buttons:</p>
  
  <p><img src="https://i.stack.imgur.com/6IE1i.png" alt="screenshot">]</p>
  
  <p>PROBLEM: when i cached or refresh the page the buttons are back to its default color (purple). how to keep the buttons (example i clicked the blue) checked to remain after cached?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>the problem already solved but the reload is limited to twice. ( when you pick a color then reload it stay but when you reload it like twice/three times it goes back to default)</p>
  
  <pre><code>window.onload = function() {
      setTimeout(function() {
          jQuery('input[type="radio"][data-default="1"]').each(function() {
              jQuery(this).removeAttr("data-default");
          });
  
  
          jQuery(function() {
              jQuery('input[type="radio"]').click(function() {
                  jQuery(this).removeAttr("data-default");
                  if (jQuery(this).is(':checked')) {
                      jQuery(this).attr("data-default", "1");
                  }
  
              });
          });
      }, 18000);
  };
  </code></pre>
  
  <p>do you know the reason why it is limited?</p>