如何返回页面时自动重执行JavaScript keyup函数并保留其结果？

嘿，这个问题我之前也碰到过！核心原因就是：你原来的搜索逻辑只绑定在了keyup事件上——只有用户在搜索框里敲键盘的时候才会触发过滤，但从详情页后退回来时，搜索框虽然保留了内容，却没有触发keyup动作，所以自然不会执行过滤，就显示全部图书了。

下面给你一套具体的解决思路和代码：

第一步：把搜索过滤逻辑抽成独立函数 #

首先，你得把原来写在keyup事件里的过滤代码单独拎出来，做成一个可复用的函数。这样不管是用户输入，还是页面加载，我们都能随时调用它。

比如原来的代码可能是这样的（只在keyup里写逻辑）：

document.getElementById('searchInput').addEventListener('keyup', function() {
  const keyword = this.value.trim();
  const books = document.querySelectorAll('.book-item');
  books.forEach(book => {
    if (book.textContent.includes(keyword)) {
      book.style.display = 'block';
    } else {
      book.style.display = 'none';
    }
  });
});

现在改成这样，把过滤逻辑抽出来：

// 独立的过滤函数，想什么时候调用就什么时候调用
function filterBooks() {
  const searchInput = document.getElementById('searchInput');
  const keyword = searchInput.value.trim();
  const books = document.querySelectorAll('.book-item');
  
  books.forEach(book => {
    // 这里可以根据你的实际需求调整过滤规则
    book.style.display = book.textContent.includes(keyword) ? 'block' : 'none';
  });
}

第二步：绑定事件，让函数在合适的时机执行 #

接下来，我们需要让这个函数在两个场景下自动执行：

1. 用户在搜索框输入内容时（保留原来的keyup逻辑）
2. 页面加载完成时（包括从详情页后退回来的情况）

// 1. 用户输入时触发过滤
document.getElementById('searchInput').addEventListener('keyup', filterBooks);

// 2. 页面首次加载时，如果搜索框有默认值，自动过滤
document.addEventListener('DOMContentLoaded', function() {
  filterBooks();
});

// 3. 处理浏览器后退缓存的情况（关键！）
// 有些浏览器后退时会从BF Cache加载页面，不会触发常规的load事件，用pageshow事件就能捕获到
window.addEventListener('pageshow', function(e) {
  // e.persisted表示页面是从缓存中加载的
  if (e.persisted || document.getElementById('searchInput').value.trim() !== '') {
    filterBooks();
  }
});

为啥这么做能解决问题？ #

• 抽成独立函数后，我们不再依赖keyup事件才能执行过滤，而是可以主动调用它
• pageshow事件会在页面被加载时触发，包括从浏览器缓存（比如后退操作）加载的情况，这就解决了后退回来不执行过滤的问题
• DOMContentLoaded则保证了页面首次加载时，如果搜索框有预设值，也能自动过滤

这样调整后，你从详情页后退回列表页时，搜索框的关键词还在，同时页面会自动执行过滤函数，直接显示对应的搜索结果啦！

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