刷新浏览器时如何向URL哈希添加数据以保存滚动位置？

你的理解完全正确：浏览器在触发beforeunload事件时，已经确定了刷新要使用的原始URL，此时通过history.replaceState或修改location.hash做出的URL变更，不会被浏览器作为刷新的目标地址——地址栏的短暂显示只是视觉上的临时反馈，实际刷新请求会忽略这个后期修改。

可行的解决思路 #

1. 实时更新哈希（推荐）

不要等到页面卸载前才修改哈希，而是在用户交互（折叠面板切换、滚动到关键元素）时就同步更新URL哈希，确保刷新时哈希里已经包含最新的状态：

// 封装哈希更新函数，避免重复拼接参数
function updateScrollHash(elIdx) {
  // 移除旧的_SCROLL参数
  const cleanedHash = window.location.hash.replace(/_SCROLL=\d+/, '');
  // 拼接新哈希内容
  const newHash = cleanedHash ? `${cleanedHash}_SCROLL=${elIdx}` : `_SCROLL=${elIdx}`;
  // 更新历史状态
  history.replaceState(null, '', newHash);
}

// 监听折叠面板切换事件（示例，根据你的实际组件调整）
document.querySelectorAll('.accordion-panel').forEach(panel => {
  panel.addEventListener('toggle', () => {
    if (panel.open) {
      const elIdx = myCodeToFindCurrentElementIndex();
      updateScrollHash(elIdx);
    }
  });
});

// 可选：滚动时按需更新哈希（比如滚动到目标元素时触发）
window.addEventListener('scroll', () => {
  const elIdx = myCodeToFindCurrentElementIndex();
  updateScrollHash(elIdx);
});

// 页面初始化时读取哈希并定位
document.addEventListener('DOMContentLoaded', () => {
  const scrollMatch = window.location.hash.match(/_SCROLL=(\d+)/);
  if (scrollMatch) {
    myCodeToScrollToElementWithIndex(+scrollMatch[1]);
  }
});

2. 用本地存储暂存状态

如果不想实时修改URL，也可以用localStorage或sessionStorage在卸载前保存状态，初始化时读取并清除：

history.scrollRestoration = "manual";

// 卸载前保存索引到本地存储
document.addEventListener("beforeunload", () => {
  const elIdx = myCodeToFindCurrentElementIndex();
  localStorage.setItem('scrollTargetIndex', elIdx);
});

// 页面加载后读取并定位，用完及时清除避免残留
document.addEventListener('DOMContentLoaded', () => {
  const savedIdx = localStorage.getItem('scrollTargetIndex');
  if (savedIdx) {
    myCodeToScrollToElementWithIndex(+savedIdx);
    localStorage.removeItem('scrollTargetIndex');
  }
});

补充说明 #

• 实时更新哈希的优势是状态会同步到浏览器历史记录，用户通过前进/后退按钮也能恢复对应位置；
• 本地存储的方式不会修改URL，适合不想暴露状态参数的场景，但要注意用完及时清除，防止不同页面或后续访问受到残留数据影响。

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