javascript - 如何向历史添加或附加新的 stateObject

Question

我有以下代码可以在当前页面状态下保存我的数据。

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 之类的函数。

Answer 1

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

您可以推送具有 addObject 方法的内容，但这看起来不是一个好主意。如果您希望将更改作为新状态推送到历史记录中，则无论如何每次都必须显式推送该状态。当你推送一个新状态时，你希望避免改变前一个状态，如果你使用相同的状态对象并修改它就会发生这种情况(即使根据 the standard ，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", '#');