缓存List.js过滤结果：实现浏览器后退时重载筛选结果

嘿，我来帮你搞定这个筛选结果缓存的问题！要实现点击浏览器后退按钮时恢复之前的筛选状态，核心是把当前筛选状态同步到浏览器历史记录和本地存储，然后在页面加载/后退时自动读取并应用这个状态。结合你现有的代码，我给你整理了一套完整的实现方案：

核心思路 #

• 当用户切换筛选选项时，把筛选值同步到URL参数（通过history.pushState）和localStorage
• 页面加载时，优先从URL参数读取筛选状态（对应后退场景），其次从localStorage读取（对应刷新场景）
• 监听浏览器的popstate事件，处理前进/后退动作时自动恢复筛选

完整代码实现 #

1. 更新筛选触发函数（changeValue） #

替换你原来的changeValue函数，加入状态缓存逻辑：

function changeValue() {
  var option = document.getElementById('filter').value;
  // 匹配你List.js中status字段的实际值（Sale/To Let）
  var filterValue = option === "Sale" ? "Sale" : "To Let";

  // 设置隐藏输入框值
  document.getElementById('field').value = filterValue;

  // 1. 更新浏览器历史状态，同步到URL参数
  const queryParams = new URLSearchParams(window.location.search);
  queryParams.set('filter', filterValue);
  history.pushState(
    { filter: filterValue },
    '',
    `${window.location.pathname}?${queryParams.toString()}`
  );

  // 2. 存入localStorage，作为刷新时的备份
  localStorage.setItem('propertyFilter', filterValue);

  // 手动触发List.js的筛选
  hackerList.filter(function(item) {
    return item.values().status === filterValue;
  });
}

2. 页面初始化与状态恢复 #

在List.js初始化后，加入状态恢复的逻辑：

// 初始化List.js（保留你原来的代码）
var options = { valueNames: [ 'status' ] };
var hackerList = new List('property-list', options);

// 页面加载时恢复筛选状态
window.addEventListener('load', function() {
  // 优先从URL参数读取，其次从localStorage读取
  const urlParams = new URLSearchParams(window.location.search);
  const savedFilter = urlParams.get('filter') || localStorage.getItem('propertyFilter');

  if (savedFilter) {
    // 同步选择框和隐藏输入框的值
    document.getElementById('filter').value = savedFilter === "Sale" ? "Sale" : "To Let";
    document.getElementById('field').value = savedFilter;

    // 自动触发筛选
    hackerList.filter(function(item) {
      return item.values().status === savedFilter;
    });
  }
});

// 监听浏览器前进/后退事件，恢复状态
window.addEventListener('popstate', function(event) {
  if (event.state?.filter) {
    const filterValue = event.state.filter;
    document.getElementById('filter').value = filterValue === "Sale" ? "Sale" : "To Let";
    document.getElementById('field').value = filterValue;
    hackerList.filter(function(item) {
      return item.values().status === filterValue;
    });
  }
});

关键细节说明 #

• URL参数同步：用history.pushState修改URL但不刷新页面，这样后退时浏览器会保留筛选状态的历史记录
• localStorage备份：防止用户刷新页面后丢失筛选状态，作为URL参数的 fallback
• 手动触发筛选：因为你用的是自定义选择框而非List.js默认的筛选输入，所以需要调用hackerList.filter()方法来执行筛选

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