调用location.reload()后如何执行额外的JS函数？

问题根源 #

location.reload() 会触发浏览器卸载当前页面、重新加载资源，当前页面的脚本上下文会在重载启动后彻底销毁。原有代码中，console.log("test") 属于当前上下文的同步任务，会在页面正式卸载前就执行，重载完成后原有代码已经不存在，不可能直接继承执行刷新后的逻辑。

实现方案 #

方案1：基于sessionStorage做刷新标记（推荐） #

利用会话存储标记是否需要在刷新后执行打印，页面加载完成后检测标记，存在则执行对应逻辑后清除标记，避免重复触发。

1. 页面初始化时添加检测逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const hasReloadFlag = sessionStorage.getItem('needLogAfterReload');
  if (hasReloadFlag) {
    console.log('test');
    // 执行完成后立即清除标记，防止后续刷新重复触发
    sessionStorage.removeItem('needLogAfterReload');
  }
});

2. 触发刷新的代码调整为：

// 刷新前先写入标记
sessionStorage.setItem('needLogAfterReload', '1');
location.reload();

方案2：基于URL查询参数做标记 #

不需要依赖本地存储，适合隐私模式下的场景，通过给URL加临时参数识别是否为主动触发的刷新。

1. 页面初始化时添加检测逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const params = new URLSearchParams(window.location.search);
  if (params.has('logAfterReload')) {
    console.log('test');
    // 可选：清除URL参数避免手动刷新重复触发
    params.delete('logAfterReload');
    const newUrl = params.toString() ? `${window.location.pathname}?${params.toString()}` : window.location.pathname;
    window.history.replaceState({}, document.title, newUrl);
  }
});

2. 触发刷新的代码调整为：

const currentUrl = new URL(window.location.href);
currentUrl.searchParams.set('logAfterReload', '1');
window.location.href = currentUrl.toString();

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