如何通过JavaScript实现history.back操作时元素保持可见？

这个场景太常见了，本质上就是要持久化页面的状态——毕竟浏览器返回时默认会加载页面的初始缓存状态，咱们得把div的显示状态存起来，等回到页面1时再读取恢复。下面给你两种实用的方案，按需选就行：

方案一：用localStorage/sessionStorage存储状态 #

这是最直接简单的方式，适合绝大多数场景：

1. 先修改你的foo()函数，在显示div的同时把状态存入存储：

function foo() {
  const theDiv = document.querySelector('.the-div');
  theDiv.classList.remove('hidden');
  // 用sessionStorage的话，关闭浏览器就自动清除；要长期保存就换成localStorage
  sessionStorage.setItem('divVisible', 'true');
}

2. 在页面1加载完成后，读取存储的状态并恢复div的显示：

document.addEventListener('DOMContentLoaded', function() {
  const isVisible = sessionStorage.getItem('divVisible');
  if (isVisible === 'true') {
    document.querySelector('.the-div').classList.remove('hidden');
  }
});

3. （可选）如果需要支持用户主动隐藏div，或者在特定场景下清理状态，比如跳转到page2后不需要保留状态，可以加这些逻辑：

// 比如用户点击隐藏按钮时更新状态
function hideDiv() {
  const theDiv = document.querySelector('.the-div');
  theDiv.classList.add('hidden');
  sessionStorage.setItem('divVisible', 'false');
}

// 要是跳转到page2后不想保留状态，就在页面卸载时清理
// window.addEventListener('beforeunload', function() {
//   sessionStorage.removeItem('divVisible');
// });

方案二：利用History API的state存储状态 #

如果不想用本地存储，也可以通过修改历史记录的state来携带状态，适合和页面跳转强绑定的场景：

1. 修改foo()函数，显示div后替换当前历史记录的state：

function foo() {
  const theDiv = document.querySelector('.the-div');
  theDiv.classList.remove('hidden');
  // 把div的可见状态存入当前历史记录的state里
  history.replaceState({ divVisible: true }, document.title);
}

2. 在页面1监听popstate事件（浏览器前进/后退时触发），同时初始加载时检查state：

// 页面加载完成时先检查历史state
window.addEventListener('load', function() {
  if (history.state?.divVisible) {
    document.querySelector('.the-div').classList.remove('hidden');
  }
});

// 监听后退/前进动作，实时更新div状态
window.addEventListener('popstate', function(e) {
  if (e.state?.divVisible) {
    document.querySelector('.the-div').classList.remove('hidden');
  } else {
    document.querySelector('.the-div').classList.add('hidden');
  }
});

注意：用History API的话，普通的<a>标签跳转或者window.location.href跳转都能保留state，但如果是打开新窗口，这个state就带不过去了，这时候还是本地存储更稳妥。

为什么原来的方式不行？ #

因为浏览器后退时，通常会从缓存中加载页面，不会重新执行所有初始化JS，所以页面会回到一开始的DOM状态（div是hidden的）。咱们必须把状态存在浏览器的持久化存储或者历史记录里，才能在返回时恢复。

内容的提问来源于stack exchange，提问作者Буянбат Чойжилсүрэн