如何在当前路径保存window history state，返回时可读取保存的状态

直接使用浏览器原生 History API 即可实现需求，操作步骤如下：

1. 当前页面保存状态到历史记录 #

使用 history.replaceState() 方法修改当前页面对应的历史条目状态，该操作不会新增历史记录、不会触发页面刷新：

// 三个参数分别为：状态对象、页面标题、当前页面URL
history.replaceState({ offset: 10 }, document.title);

如果需要新增一条历史记录而非修改当前记录，可替换为 history.pushState() 方法。

2. 返回页面时读取存储的状态 #

有两种读取场景：

• 从其他页面通过返回操作回到当前页时，会触发popstate事件，可从事件对象中直接读取状态：

window.addEventListener('popstate', (event) => {
  if (event.state) {
    const { offset } = event.state;
    // 此处添加拿到状态后的业务逻辑，比如恢复列表分页、滚动位置等
    console.log('获取到历史状态offset：', offset);
  }
});

• 页面初始化/刷新时，可直接读取全局history.state属性获取状态：

window.addEventListener('load', () => {
  if (history.state) {
    console.log('页面初始化读取历史状态：', history.state.offset);
  }
});

注意事项 #

• 存储的状态必须是可序列化的JSON对象，不能包含函数、Symbol等不可序列化的内容
• 状态数据最大可存储几MB，完全满足普通业务场景的存储需求
• 若使用前端框架路由（Vue Router、React Router等），路由实例已封装了状态读写能力，可直接调用框架提供的API操作，无需手动监听原生事件

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