如何遍历JavaScript的window.history状态对象？

嘿，我来帮你理清楚这个问题：首先明确一点——原生的History API并没有提供直接遍历所有已推入/替换的状态对象的能力。哪怕你只关心当前页面创建的状态，浏览器出于安全和规范的考虑，也没有开放对history栈的直接遍历接口。

不过除了你提到的结合sessionStorage的方案，还有几个更贴合你需求的思路：

1. 自定义History包装器（最推荐） #

自己封装一层History API的调用，把每次pushState/replaceState的状态对象存到一个内存数组里，这样你随时都能遍历这个数组拿到所有当前页面创建的状态。示例代码如下：

// 自定义一个封装好的history工具
const appHistory = {
  _stateStack: [],
  pushState(state, title, url) {
    // 先把状态存到本地栈里
    this._stateStack.push({ state, url, title });
    // 再调用原生API
    window.history.pushState(state, title, url);
  },
  replaceState(state, title, url) {
    // 替换栈顶的状态（如果栈不为空）
    if (this._stateStack.length > 0) {
      this._stateStack[this._stateStack.length - 1] = { state, url, title };
    } else {
      this._stateStack.push({ state, url, title });
    }
    window.history.replaceState(state, title, url);
  },
  // 对外提供获取当前状态栈的方法
  getStateStack() {
    // 返回副本，避免外部修改内部栈
    return [...this._stateStack];
  }
};

// 使用示例
appHistory.pushState({ pageId: 'home' }, '首页', '/');
appHistory.pushState({ pageId: 'product', id: 123 }, '商品详情', '/product/123');
// 直接拿到所有状态
console.log(appHistory.getStateStack());

这种方法完全可控，所有状态都存在内存里，页面刷新后会自动重置，完美匹配你“只关心当前页面创建的状态”的需求，而且不需要依赖任何存储。

2. 监听popstate+包装原生API（兼容第三方调用） #

如果你的项目里有第三方库也会操作history，没办法完全替换成自定义的包装器，可以通过监听popstate事件，同时包装原生的pushState/replaceState来同步维护一个状态栈。示例：

const stateStack = [];
// 初始化：把当前页面的初始状态加入栈
if (window.history.state) {
  stateStack.push(window.history.state);
}

// 监听前进后退事件，调整状态栈
window.addEventListener('popstate', (e) => {
  const currentState = e.state;
  // 假设每个状态都有唯一标识（比如id），找到它在栈中的位置
  const targetIndex = stateStack.findIndex(s => s.id === currentState.id);
  if (targetIndex !== -1) {
    // 截断栈到当前索引+1，模拟浏览器history栈的变化
    stateStack.length = targetIndex + 1;
  } else {
    // 遇到意外的状态（比如第三方库插入的），直接加入栈
    stateStack.push(currentState);
  }
});

// 包装原生pushState，同步更新栈
const originalPushState = window.history.pushState;
window.history.pushState = function(state, title, url) {
  stateStack.push(state);
  return originalPushState.apply(this, arguments);
};

// 包装原生replaceState，同步更新栈顶
const originalReplaceState = window.history.replaceState;
window.history.replaceState = function(state, title, url) {
  if (stateStack.length > 0) {
    stateStack[stateStack.length - 1] = state;
  } else {
    stateStack.push(state);
  }
  return originalReplaceState.apply(this, arguments);
};

这种方法能覆盖大多数场景，但需要注意处理状态没有唯一标识的情况，可能需要根据url或者其他信息来调整判断逻辑。

3. 性能API辅助（仅限部分场景） #

部分浏览器支持performance.navigation接口，它能获取页面的导航类型（比如是前进、后退还是刷新），但它不能直接获取状态对象，只能辅助你判断导航行为，结合手动维护的栈来补充信息。不过这只是辅助手段，不能直接解决遍历状态的问题。

总的来说，最推荐的是第一种自定义包装器的方案，简单、灵活，完全符合你的需求；如果有第三方代码干扰，就用第二种方案。原生API确实没有直接遍历history栈的方法，所以这些都是基于手动维护的替代思路。

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