如何将新的stateObject添加或附加到历史记录中

How to add or append new stateObject to history

本文关键字：历史 记录 添加 stateObject      更新时间：2023-09-26

我有以下代码将data保存在当前页面状态。

window.history.pushState({myData: data}, "RandomTitle", '#');

但现在，我还想保存另一个值，即scrollTop。如果我做

window.history.pushState({scrollTop: scrollTop}, "RandomTitle", '#');

上面的代码将用新的状态替换历史状态，myData将消失。

问题是，当我的历史状态中有myData时，我是否可以添加scrollTop？或者我只需要一开始就把它设置成

window.history.pushState({myData: data, scrollTop: 0}, "RandomTitle", '#');
// To change the scrollTop in history state
window.history.state.scrollTop = $(window).scrollTop();

我在想是否有window.history.state.addObject之类的函数。

默认情况下，没有history.state.addObject函数。history.state包含您推送的对象（没有其他内容）。

您可以推送具有addObject方法的东西，但这看起来不是一个好主意。如果您希望将更改作为新状态推送到历史记录中，那么每次都必须显式推送该状态。当你推送一个新状态时，你希望避免改变前一个状态，如果你使用相同的状态对象并修改它，就会发生这种情况（即使根据标准，history.state应该是实际状态数据的克隆）。您应该创建一个新对象（它可能是以前状态的克隆）。

以下是您的操作方法。

window.history.pushState(
  Object.assign({}, window.history.state, {scrollTop: scrollTop}),
  "RandomTitle", '#'
);

即使历史中没有当前状态（即window.history.state是undefined），它也会工作，因为Object.assign忽略了undefined自变量。

你也可以使用这个自动化的功能：

function extendHistoryState(){
   arguments[0] = Object.assign({}, window.history.state, arguments[0]);
   window.history.pushState.apply(window.history, arguments);
}

它的工作原理与pushState（参数相同）完全相同，只是它还将在新状态中复制以前状态的属性。因此，你可以做的不是以前的代码：

extendHistoryState({scrollTop: scrollTop}, "RandomTitle", '#');

由于您的URL参数在两个pushState方法之间是相同的，因此您实际上是在替换它，而不是在历史记录中添加新的状态。您需要指定一个不同的URL来保持状态数据的独立性，或者组合对象并将其重新分配到状态

相关文章：