记住过滤器的选择

Question

我有一个过滤器脚本，效果很好，但是当您单击链接时，它需要记住您最后选择的过滤器。

有人知道如何添加这个吗？ Cookie/本地存储？

我做了一个小提琴： https://jsfiddle.net/fourroses666/mp7os4zy/3/

    /* portfolio filter */
    $("#filter input").each(function() {
        $(this).on("click", function(){
            var filtertag = $(this).attr('class');
            $('.p-item').show();
            $('.p-item:not(.' + filtertag + ')').hide();
        });
    });

#filter{margin-top:20px}
.f-btn{display:inline-block;position:relative;padding-left:32px;margin-bottom:12px;margin-right:15px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.f-btn input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}
.checkmark{position:absolute;top:2px;left:0;height:24px;width:24px;border:2px solid yellow;border-radius:5px}
.checkmark:after{content:"";position:absolute;display:none}
.f-btn input:checked~.checkmark:after{display:block}
.f-btn .checkmark:after{left:8px;top:4px;width:5px;height:10px;border:solid black;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}


.p-menu{width:370px; background:#eee; padding:5px 25px 25px;}
.p-menu ul{list-style:none; padding:0; margin:0!important;}
.p-menu li{padding:5px 0!important; margin:0;}
.p-menu li a{color:black!important; font-weight:400!important; text-decoration:none;}
.p-menu .active a{font-weight:600!important;}
    
.p-filter{padding-bottom:8px; margin-bottom:12px; border-bottom:1px solid #ccc;}

.p-item.active a{position:relative;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="p-menu">    
    <div class="p-filter">
        <div id="filter">
            <label class="f-btn"><input class="" checked name="tips" type="radio"><span class="checkmark"></span>All</label><br>
            <label class="f-btn"><input class="filter1" name="tips" type="radio"><span class="checkmark"></span>Filter one</label><br>  
            <label class="f-btn"><input class="filter2" name="tips" type="radio"><span class="checkmark"></span>Filter two</label><br>
        </div>
    </div>
    
    <ul id="p-items">
        <li class="p-item filter1"><a href="javascript:window.location.reload(true)">Bla blaa (filter 1)</a></li>
        <li class="p-item filter1"><a href="javascript:window.location.reload(true)">Blooo blo (filter 1)</a></li>
        <li class="p-item filter2"><a href="javascript:window.location.reload(true)">Bluu blu (filter 2)</a></li>
        <li class="p-item filter2"><a href="javascript:window.location.reload(true)">Ble bleue (filter 2)</a></li>
        <li class="p-item filter1"><a href="javascript:window.location.reload(true)">Blaaa (filter 1)</a></li>
        <li class="p-item filter2"><a href="javascript:window.location.reload(true)">Bliiii (filter 2)</a></li>
    </ul>
</div>

Answer 1

我会使用会话存储来存储

filtertag

，然后在

$(document).ready()

上检索它。

$("#filter input").each(function() {
  $(this).on("click", function(){
    let filtertag = $(this).attr('class');
    $('.p-item').show();
    if(filtertag != '')
      $('.p-item:not(.' + filtertag + ')').hide();
    sessionStorage.setItem("filtertag", filtertag);
  });
});

$(document).ready(function() {
  let filtertag = sessionStorage.getItem("filtertag");
  if(filtertag != '') {
    $('input.' + filtertag).prop('checked', true);
    $('.p-item').show();
    $('.p-item:not(.' + filtertag + ')').hide();
  }
});

https://jsfiddle.net/jbwvh24r/