2016-04-29 116 views
5

我有以下代码来保存我的data当前页面状态。如何添加或追加新的stateObject到历史记录

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什么功能。

回答

4

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

你可能会推一些有addObject方法的东西,但它看起来不是一个好主意。 如果您希望将更改作为新状态推入历史记录中,则必须每次都明确推送该状态。当你推新的状态时,你想要避免改变前一个状态,如果你使用相同的状态对象并修改它(即使根据the standard,history.state应该是实际状态数据的克隆) 。 您应该创建一个新对象(它可能是以前状态的一个克隆)。

这里是你如何做到这一点。

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

即使在历史上没有当前状态,它将正常工作(即window.history.stateundefined)为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", '#'); 
+0

感谢您的回答,顺便提一句,您在Object.assign之后错过了昏迷'。现在,如果我碰巧不止一次运行这个语句,为了替换历史状态中的'scrollTop'或'myData'变量,它不再起作用。 – choz

+0

对。谢谢。更新。 –

+0

它不工作的原因是因为之前状态的值优先于要添加的新值(即,如果以前的状态包含值,则无论如何都保留它)。我通过在Object.assign参数末尾推迟这些新值来改变它。 –

0

因为你的URL参数既pushState的方法之间是相同的,你实际上替换它,而不是追加一个新的国家的历史。你需要指定一个不同的URL来保持状态数据不同,或者组合对象并重新分配状态

相关问题