如何添加或追加新的stateObject到歷史記錄

我有以下代碼來保存我的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什麼功能。

來源

2016-04-29 choz

默認情況下，沒有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", '#');

來源

2016-05-03 04:01:46

感謝您的回答，順便提一句，您在Object.assign之後錯過了昏迷'。現在，如果我碰巧不止一次運行這個語句，爲了替換歷史狀態中的'scrollTop'或'myData'變量，它不再起作用。 – choz

對。謝謝。更新。 –

它不工作的原因是因爲之前狀態的值優先於要添加的新值（即，如果以前的狀態包含值，則無論如何都保留它）。我通過在Object.assign參數末尾推遲這些新值來改變它。 –

因爲你的URL參數既pushState的方法之間是相同的，你實際上替換它，而不是追加一個新的國家的歷史。你需要指定一個不同的URL來保持狀態數據不同，或者組合對象並重新分配狀態

來源

2016-05-03 04:12:08 theaccordance

如何添加或追加新的stateObject到歷史記錄

回答

相關問題