When checkbox checked the value stored in a div but on page refresh it is disappeared. I want it stay the same on page refresh as well.

Here is my HTML code

    <form name="formProductsFilter" id="formProductsFilter" action="glasses-listing.php" method="GET" class="direct-form">
<ul id="options" >
                          <li >Size
                            <div  data-filter-group="size">
                              <div >
                                <label for="small" >
                                <input type="checkbox"  value="Small" data-valuetwo="small" id="Small" name="size[]">
                                  <i></i><a id="small1" data-filter-value=".small">Small</a></label>
                              </div>
                              <div >
                                <label for="medium" >
                                <input type="checkbox"  value="Medium" data-valuetwo="medium" id="Medium" name="size[]">
                                  <i></i><a id="medium1" data-filter-value=".medium">Medium</a></label>
                              </div>
                              <div >
                                <label for="large" >
                                <input type="checkbox"  value="Large" data-valuetwo="large" id="Large" name="size[]">
                                  <i></i><a id="large1" data-filter-value=".large">Large</a></label>
                              </div>
                            </div>
                          </li>
    </ul></form>

Here is stored value div

<div id="selecteditems" class="d-flex border">
</div>  

And my script as below

    $(document).ready(function() {
    $('.chkbx').click(function() {
        var selected = $('.chkbx:checked').map(function() {
            return $(this).attr('data-valuetwo');
        }).get().join(' ');
        $('#selecteditems').html(selected);
    });
});

CodePudding user response：

You should save it on a localStorage, here is how your code will look like: (pardon the formatting, stackoverflow formatting sucks)

$(document).ready(function () {
var checkedBoxes = JSON.parse(localStorage.getItem("checkedBox"))

$(".chkbx").each(function ( index, checkbox) {
if(checkedBoxes.length) {
  $(checkbox).attr('checked', checkedBoxes[index])
}
    $(checkbox).on( "click", function () {        
    var newCheckedArray = []
    $(".chkbx").each(function ( index, ch   ) {
                newCheckedArray.push($(ch).is(":checked"))
            });
    
localStorage.setItem('checkedBox',JSON.stringify(newCheckedArray))
            }
        );
    });
});

CodePudding user response：

Yout can achieve your goal by saving items in the localStorage. Try on this:

$(document).ready(function() {
    // Load values from localStorage when page has loaded
    const selectedValues = localStorage.getItem("selectedValues");
    if(selectedValues){
      $('#selecteditems').html(selectedValues)
      selectedValues.split(" ").forEach(value => {
        $(`.chkbx[data-valuetwo=${value}]`).attr('checked', 'checked');
      })
    }
    // Save Items in localStorage when page is being unloaded
    window.addEventListener('unload', function(event) {
      const selectedValue = $('#selecteditems').text().trim();
      localStorage.setItem("selectedValues", selectedValue);
    });

    // Your code
    $('.chkbx').click(function() {
      var selected = $('.chkbx:checked').map(function() {
        return $(this).attr('data-valuetwo');
      }).get().join(' ');
      $('#selecteditems').html(selected);
    });
  });

Please consider that if you don't want show values in the div#selecteditems element you can make it hidden or just simply store your values in a javascript variable rather than storing it in the html of the div#selecteditems, all other parts is the same.