Javascript 如何在单击“上一步”且过滤器仍在工作时选中复选框

我有这些复选框

<div class="col-6 col-md-3 checkbox-rounds" id="filter-checks">
  <p class="orange OldStandard"> Menu Filters</p>
  <a type="button" class="check orange pointer OldStandard">Select All </a>
  <br>
  <a type="button" class="uncheck orange pointer OldStandard"> Unselect All</a>
  <br>
        <input type="checkbox" class="checkbox-round" value="vegan" id="vegan"/><label for="vegan" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Vegan</label>
        <br/>
        <input type="checkbox" class="checkbox-round" value="vegetarian" id="vegetarian"/> <label for="vegetarian" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Vegetarian</label>
        <br/>
        <input type="checkbox" class="checkbox-round" value="pescetarian" id="pescetarian"/> <label for="pescetarian" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Pescetarian</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="dairy-free" id="dairy-free"/> <label for="dairy-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Dairy-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="egg-free" id="egg-free"/> <label for="egg-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Egg-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="fish-free" id="fish-free"/> <label for="fish-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Fish-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="shellfish" id="shellfish"/> <label for="shellfish" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Shellfish-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="tree" id="tree"/> <label for="tree" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Tree nut-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="peanut" id="peanut"/> <label for="peanut" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Peanut-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="soy" id="soy"/> <label for="soy" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Soy-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="total-fat" id="total-fat"/> <label for="total-fat" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Low Total Fat</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="saturated-fat" id="saturated-fat"/> <label for="saturated-fat" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Saturated Fat</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="cholesterol" id="cholesterol"/> <label for="cholesterol" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Cholesterol</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="sodium" id="sodium"/> <label for="sodium" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Sodium</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="protein" id="protein" /> <label for="protein" class="OldStandard"> <span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Protein &#62;25g</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="calories" id="calories" /> <label for="calories" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Calories  &#60;450 calories</label>
        <br>

  </div>

我尝试了后退按钮，但现在当我返回时，所有内容都被检查，没有任何内容被过滤

window.onbeforeunload = function() { 
  $("input[type='checkbox']").prop('checked', true)

})

---

如何解决此问题？

每次单击复选框时，将所选复选框的id存储在变量\u checked中

localStorage属性允许您访问本地存储对象。 本地存储类似于会话存储。唯一的区别是 虽然localStorage中存储的数据没有过期时间，但是 浏览会话时，存储在sessionStorage中的内容将被清除 结束，即浏览器关闭时结束

应该注意的是，数据存储在localStorage或 会话存储特定于页面的协议

您可以使用在卸载前将所选内容存储在上

onload调用init方法从localStorage读取选择并检查它们

function init(){

    _checked = localStorage.getItem('selection',_checked);

    if(_checked) {
        var ch = _checked.split(',');
        ch.forEach(function(val){
             $('#'+val).prop('checked', true);
        });


        // Your Filter Action
        $(".deliveryItem").hide();

        var selector = '.deliveryItem';
        $("#filter-checks :checkbox:checked").each(function(e, i) {
             selector += '.' + i.value;
        });

       $(selector).show();
    }
}

完整JS

检查代码段

此方法将在浏览器中本地存储所选内容，而在不同浏览器中所选内容将不可用

即使您在几天后返回该网站，它也将在当前浏览器中可用

要清除选择，请调用localStorage.clear

---

这将删除存储在本地存储器中的所有数据。

$input[type='checkbox']。prop'checkbox'，true将选中所有复选框。阅读页面之间的会话数据。这是SPA吗？你可以选中一个数组/对象来存储对复选框的引用，然后将该数组/对象放入/并用于检索它。是的，但我的复选框不在表单中，因此我如何将它们存储在会话中？你可以将其放入历史状态：它保持选中状态，但现在不过滤膳食，选中复选框后，它将恢复正常。我必须单击一个筛选器，以便其他人再次激活。您需要在加载页面上再次调用init内部的筛选器操作。您的筛选器操作在哪里？我在if_checked{语句完成后将其放置？$function{$filter checks:checkbox.clickfunction{$.deliveryItem.hide；变量选择器='.deliveryItem'；$filter检查：复选框：选中。每个函数，i{selector+='.+i.value；}；$selector.show；}；}；

var _checked="";
$(function() {
  init();
  $("#filter-checks :checkbox").click(function() {
    $(".deliveryItem").hide();
    if($(this).is(":checked")) _checked+=this.id+',';
    else _checked=_checked.replace(this.id+',','');

    var selector = '.deliveryItem';
    $("#filter-checks :checkbox:checked").each(function(e, i) {
      selector += '.' + i.value;
    });
    $(selector).show();
  });
});

window.onbeforeunload = function() {
  if(_checked!="") localStorage.setItem('selection',_checked);
};

function init(){

    _checked = localStorage.getItem('selection',_checked);

    if(_checked) {
        var ch = _checked.split(',');
        ch.forEach(function(val){
             $('#'+val).prop('checked', true);
        });


        // Your Filter Action
        $(".deliveryItem").hide();

        var selector = '.deliveryItem';
        $("#filter-checks :checkbox:checked").each(function(e, i) {
             selector += '.' + i.value;
        });

       $(selector).show();
    }
}

var _checked="";
$(function() {
  init();
  $("#filter-checks :checkbox").click(function() {
    $(".deliveryItem").hide();
    if($(this).is(":checked")) _checked+=this.id+',';
    else _checked=_checked.replace(this.id+',','');

    var selector = '.deliveryItem';
    $("#filter-checks :checkbox:checked").each(function(e, i) {
      selector += '.' + i.value;
    });
    $(selector).show();
  });
});

window.onbeforeunload = function() {
  if(_checked!="") localStorage.setItem('selection',_checked);
};

function init(){

    _checked = localStorage.getItem('selection',_checked);

    if(_checked) {
        var ch = _checked.split(',');
        ch.forEach(function(val){
             $('#'+val).prop('checked', true);
        });


         // Your Filter Action
        $(".deliveryItem").hide();

        var selector = '.deliveryItem';
        $("#filter-checks :checkbox:checked").each(function(e, i) {
             selector += '.' + i.value;
        });

       $(selector).show();
    }
}