调整jQuery筛选脚本：页面重载时基于选中复选框自动执行

看起来你已经搞定了复选框在页面返回时保持选中的部分，剩下的核心就是在页面加载（包括从其他页面返回）时自动触发筛选逻辑。结合你的基础jQuery知识，我们可以通过以下几步实现，完全不需要用到cookie：

1. 把筛选逻辑封装成可复用的函数 #

首先，你需要把原来点击"Filter"按钮时执行的筛选代码抽出来，变成一个独立的函数。这样不管是用户主动点击按钮，还是页面自动加载，都能调用同一个逻辑，避免重复代码。

比如假设你的筛选逻辑是这样的（可以根据你实际的代码调整）：

function applyTeamFilters() {
  // 1. 获取所有已选中的筛选复选框的值
  var activeFilters = [];
  $('.filter-checkbox:checked').each(function() {
    activeFilters.push($(this).val());
  });

  // 2. 根据选中的筛选条件显示/隐藏团队成员
  $('.team-member').each(function() {
    // 假设每个团队成员的标签存在data-tags属性里，比如data-tags="marketing,management"
    var memberTags = $(this).data('tags').split(',');
    
    // 如果没有选中任何筛选器，或者成员标签和选中的筛选器有匹配，就显示成员
    var shouldShow = activeFilters.length === 0 || activeFilters.some(filter => memberTags.includes(filter));
    $(this).toggle(shouldShow);
  });
}

2. 页面加载时自动执行筛选 #

接下来要让这个函数在两种场景下自动运行：

• 页面首次加载完成时
• 从其他页面返回（浏览器后退缓存）时

浏览器的后退缓存（BF Cache）会保留页面的状态（包括复选框的选中状态），但这时候$(document).ready()不会再次触发，所以我们需要额外监听pageshow事件来处理这种情况：

$(document).ready(function() {
  // 页面首次加载时，立即应用筛选
  applyTeamFilters();

  // 监听pageshow事件，处理从其他页面返回的情况
  $(window).on('pageshow', function(event) {
    // event.persisted表示页面是从浏览器缓存中加载的
    if (event.persisted) {
      applyTeamFilters();
    }
  });

  // 保留原来的筛选按钮点击事件，让用户主动点击也能触发筛选
  $('.filter-btn').on('click', applyTeamFilters);
});

关键说明 #

• 为什么用pageshow？ 当用户从其他页面后退回来时，很多浏览器会直接从缓存中加载页面，不会重新执行ready事件。pageshow事件会在页面显示时触发，不管是首次加载还是从缓存恢复，event.persisted可以帮我们判断是否来自缓存。
• 不需要额外存储状态：你提到返回后复选框已经保持选中，这是浏览器默认的表单状态保存功能，我们只需要基于这些已选中的复选框重新执行筛选逻辑就行，完全不用cookie或localStorage。

测试小技巧 #

你可以通过以下方式验证效果：

1. 选中几个筛选复选框，点击筛选按钮确认效果正常
2. 点击某个团队成员跳转到其他页面
3. 点击浏览器的后退按钮返回原页面，看看筛选后的结果是否自动显示

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