javascript - 当您单击“后退”并且过滤器仍然有效时，如何保持复选框处于选中状态

Question

我有这些复选框

<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>

如果用户选中一个餐食过滤器，他们可以选择一顿饭，这会将他们带到另一个页面，但如果他们通过浏览器或后退按钮单击返回，我如何保持他们过滤的复选框仍然存在那里？这是我的 JavaScript:

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

我尝试了后退按钮，但现在当我返回时所有内容都会被选中，并且没有任何内容被过滤

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

}；

如何解决这个问题？

Answer 1

每次点击复选框时，都会将所选复选框的id存储在变量_checked中

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

The localStorage property allows you to access a local Storage object. localStorage is similar to sessionStorage. The only difference is that, while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the browsing session ends—that is, when the browser is closed.

It should be noted that data stored in either localStorage or sessionStorage is specific to the protocol of the page.

您可以使用localStorage 存储您的选择onbeforeunload

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

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

检查代码片段 https://jsfiddle.net/ejvf13b0/1/

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

此方法会将选择存储在浏览器本地，并且选择将无法跨不同浏览器使用。

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

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

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