Chrome返回page_1时保留滚动位置并避免重加载的JS/JQuery实现

确实，Chrome和Firefox在后退/前进缓存（bfcache）的处理上差异很大，Firefox会自动保留页面状态，而Chrome经常会重新加载页面导致状态丢失。不过我们可以通过JavaScript来手动实现这个需求，下面给你两个实用的方案：

方案1：用sessionStorage记录状态（最通用） #

这个方法通过在页面跳转前保存滚动位置和表格加载状态，返回时读取并恢复，同时跳过表格的重新加载逻辑。

在page_1页面添加以下脚本：

// 页面跳转前（离开page_1去page_2）保存状态
window.addEventListener('beforeunload', () => {
  // 存储当前滚动距离
  sessionStorage.setItem('page1ScrollPos', window.scrollY);
  // 标记表格已经加载完成
  sessionStorage.setItem('page1TableLoaded', 'true');
});

// 页面加载时恢复状态
document.addEventListener('DOMContentLoaded', () => {
  const isTableLoaded = sessionStorage.getItem('page1TableLoaded');
  const savedScrollPos = sessionStorage.getItem('page1ScrollPos');

  if (isTableLoaded === 'true') {
    // 跳过表格重新加载的逻辑（比如你之前用来渲染表格的AJAX或函数调用）
    // 举个例子：如果原本是调用renderTable()加载表格，这里就不要调用它了

    // 恢复之前的滚动位置
    if (savedScrollPos) {
      window.scrollTo(0, parseInt(savedScrollPos));
    }

    // 用完就清除状态，避免正常刷新页面时受影响
    sessionStorage.removeItem('page1TableLoaded');
    sessionStorage.removeItem('page1ScrollPos');
  } else {
    // 首次访问页面，正常加载表格
    renderTable(); // 替换成你实际的表格加载函数
  }
});

方案2：利用bfcache相关事件（更贴合浏览器原生行为） #

Chrome在某些场景下会使用bfcache，我们可以监听pageshow和pagehide事件来针对性处理，减少不必要的存储操作：

let keepPageState = false;

// 页面被隐藏（跳转到page_2）时判断是否会存入bfcache
window.addEventListener('pagehide', (e) => {
  if (e.persisted) {
    // 页面会被存入bfcache，标记需要保留状态
    keepPageState = true;
  } else {
    // 不会存入bfcache，用sessionStorage备份
    sessionStorage.setItem('page1ScrollPos', window.scrollY);
    sessionStorage.setItem('page1TableLoaded', 'true');
  }
});

// 页面显示（从page_2返回）时恢复状态
window.addEventListener('pageshow', (e) => {
  if (e.persisted || keepPageState) {
    // 从bfcache恢复，DOM和滚动状态都还在，无需额外操作
    keepPageState = false;
  } else {
    // 从sessionStorage恢复
    const isTableLoaded = sessionStorage.getItem('page1TableLoaded');
    const savedScrollPos = sessionStorage.getItem('page1ScrollPos');
    
    if (isTableLoaded === 'true') {
      // 跳过表格加载
      savedScrollPos && window.scrollTo(0, parseInt(savedScrollPos));
      sessionStorage.removeItem('page1TableLoaded');
      sessionStorage.removeItem('page1ScrollPos');
    } else {
      renderTable();
    }
  }
});

关键注意点 #

• 核心是阻止表格重新加载：如果你的表格是通过AJAX动态生成的，一定要确保在恢复状态时不要再次发起AJAX请求，否则表格还是会被重载。
• 测试时注意Chrome的隐私模式：隐私模式下缓存行为可能和正常模式不同，记得多测试几种场景。
• 如果表格有筛选、排序等额外状态，你可以扩展sessionStorage的存储内容，把这些状态也记录下来，返回时一并恢复。

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