Question

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

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

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

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

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

问题是，在我的历史状态中，scrollTop可以添加myData吗？或者我只需要最初设置它，

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", '#');

Answer 2

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

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

2 个答案: