如何为筛选脚本添加上次选中筛选器的记忆功能？

首先明确结论：选localStorage更合适，原因如下：

• 存储容量更大（最高5MB，远超过Cookie的4KB限制）
• 不会随HTTP请求发送到服务器，减少不必要的带宽消耗
• 专门用于存储客户端本地状态，完全匹配这个场景的需求
  Cookie更适合需要和服务器共享的状态，这里不需要后端交互，所以localStorage是最佳选择。

下面是修改后的完整代码，实现刷新页面后保留上次选中的筛选状态：

HTML（无需改动） #

<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>全部</label><br>
            <label class="f-btn"><input class="filter1" name="tips" type="radio"><span class="checkmark"></span>筛选一</label><br>  
            <label class="f-btn"><input class="filter2" name="tips" type="radio"><span class="checkmark"></span>筛选二</label><br>
        </div>
    </div>
    
    <ul id="p-items">
        <li class="p-item filter1"><a href="javascript:window.location.reload(true)">内容一（筛选一）</a></li>
        <li class="p-item filter1"><a href="javascript:window.location.reload(true)">内容二（筛选一）</a></li>
        <li class="p-item filter2"><a href="javascript:window.location.reload(true)">内容三（筛选二）</a></li>
        <li class="p-item filter2"><a href="javascript:window.location.reload(true)">内容四（筛选二）</a></li>
        <li class="p-item filter1"><a href="javascript:window.location.reload(true)">内容五（筛选一）</a></li>
        <li class="p-item filter2"><a href="javascript:window.location.reload(true)">内容六（筛选二）</a></li>
    </ul>
</div>

CSS（无需改动） #

#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;}

修改后的JavaScript（核心逻辑） #

/* 封装筛选逻辑，避免重复代码 */
function applyFilter(filterTag) {
    $('.p-item').show();
    if (filterTag) {
        $('.p-item:not(.' + filterTag + ')').hide();
    }
}

/* 页面加载时恢复筛选状态 */
$(document).ready(function() {
    // 读取localStorage中保存的筛选器
    const savedFilter = localStorage.getItem('selectedFilter');
    
    if (savedFilter) {
        // 选中对应的单选框
        $('#filter input.' + savedFilter).prop('checked', true);
        // 执行筛选
        applyFilter(savedFilter);
    } else {
        // 默认显示全部
        $('#filter input[class=""]').prop('checked', true);
        applyFilter('');
    }

    /* 筛选器点击事件 */
    $("#filter input").on("click", function(){
        const filterTag = $(this).attr('class');
        // 保存到localStorage
        localStorage.setItem('selectedFilter', filterTag);
        // 执行筛选
        applyFilter(filterTag);
    });
});

关键逻辑说明： #

1. 存储状态：用户点击筛选器时，把选中的筛选类名存入localStorage的selectedFilter字段。
2. 恢复状态：页面加载完成后，读取localStorage中的值，如果存在，就选中对应的单选框并自动执行筛选；如果不存在，就默认选中"全部"。
3. 代码复用：把筛选逻辑封装成applyFilter函数，避免点击和页面加载时重复写相同代码。

内容的提问来源于stack exchange，提问作者fourroses