如何在popstate回调中访问非当前JS历史状态及历史状态列表？

好问题！答案是：原生浏览器API并没有提供直接访问即将离开的历史状态，或是完整历史状态列表的方法，下面详细解释：

关于onpopstate回调中的状态访问 #

当你调用history.back()触发onpopstate时，event.state返回的是你刚刚导航进入的那个状态（也就是例子中的{foo:'bar'}），而不是你即将离开的状态（{foo:'baz'}）。浏览器的历史API设计上就没有暴露“离开的状态”这个信息——这是出于安全和隐私考量，防止脚本随意窥探用户的浏览轨迹（哪怕是同域内的操作）。

能否获取完整的历史状态列表？ #

同样不行。history对象并没有提供任何方法来获取整个历史状态数组（比如你提到的[null, {foo:bar}, {foo:baz}]）。你只能通过pushState/replaceState来添加或修改当前栈顶的状态，或是在popstate触发时拿到当前进入的状态。

替代方案：自己维护状态副本 #

虽然原生API做不到，但你可以通过封装历史操作，手动维护一个和浏览器历史同步的状态列表，来近似实现需求。比如：

// 手动维护的历史状态副本
const localHistoryStates = [];

// 封装pushState，每次调用时同步更新本地列表
function pushCustomState(state) {
  history.pushState(state, '');
  localHistoryStates.push(state);
}

// 处理popstate事件
window.onpopstate = function(event) {
  const currentState = event.state;
  // 此时，即将离开的状态就是本地列表的最后一项（因为浏览器刚执行了back）
  const leavingState = localHistoryStates.pop();
  
  console.log('当前进入的状态：', currentState); // {foo: 'bar'}
  console.log('刚刚离开的状态：', leavingState); // {foo: 'baz'}
};

// 使用封装后的方法添加状态
pushCustomState({foo:'bar'});
pushCustomState({foo:'baz'});
history.back();

注意事项 #

这种方式有几个局限性需要留意：

• 如果用户通过浏览器前进/后退按钮跳转到了不是你通过封装方法添加的状态（比如页面初始的null状态），本地列表会和实际浏览器历史不同步。
• 如果状态中包含无法被序列化的内容（比如函数、循环引用），直接比较状态会出问题——建议给每个自定义状态添加唯一ID，方便后续匹配。
• 其他脚本如果直接调用原生history.pushState/replaceState，也会导致本地列表和实际历史不同步，所以最好确保所有历史操作都通过你的封装方法执行。

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