如何在Javascript中实现点击浏览器返回按钮时传递指定变量回上一页面

浏览器自带的返回按钮触发的是历史记录栈的回退操作，没有开放直接修改返回目标URL的接口，无法像自定义返回按钮那样直接给目标URL拼接后缀参数，以下两种方案均兼容Chrome、Firefox、Safari、Edge等所有主流浏览器，无需区分浏览器写适配逻辑，适配你的EJS独立页面场景：

方案1：使用sessionStorage存储传递参数（最常用，实现最简单） #

• 实现逻辑：在当前页面离开前存储要传递的参数，返回的目标页面监听页面显示事件读取参数，用完即可清理，sessionStorage为标签页级隔离，不会污染其他页面数据
  当前页面（触发返回的页面）JS代码：

// 监听页面离开事件，只要离开当前页就存储参数
window.addEventListener('beforeunload', () => {
  // 替换为你要传递的实际参数值
  sessionStorage.setItem('backPassParam', '2')
})

上一页面（接收参数的页面）JS代码：

// 监听页面显示事件，覆盖从历史记录返回的场景
window.addEventListener('pageshow', () => {
  const passParam = sessionStorage.getItem('backPassParam')
  if (passParam) {
    // 此处写你使用参数的业务逻辑
    console.log('获取到返回传递的参数：', passParam)
    // 用完立即删除，避免下次进入页面重复读取旧数据
    sessionStorage.removeItem('backPassParam')
  }
})

如果需要在EJS模板渲染阶段直接使用参数，直接在模板内嵌的JS中读取sessionStorage的对应值即可。

方案2：使用History API传递状态参数 #

• 实现逻辑：通过历史记录API给当前页面的历史记录项挂载自定义状态，返回时目标页面监听回退事件读取状态值
  当前页面（触发返回的页面）JS代码：

// 页面加载完成后修改当前历史记录的状态，存入要传递的参数
window.addEventListener('load', () => {
  history.replaceState({ backPassParam: '2' }, document.title)
})

上一页面（接收参数的页面）JS代码：

// 监听历史记录变更事件，用户点击前进/后退按钮时触发
window.addEventListener('popstate', (event) => {
  if (event.state?.backPassParam) {
    // 此处写你使用参数的业务逻辑
    console.log('获取到返回传递的参数：', event.state.backPassParam)
  }
})

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