关于使用 History.js 管理浏览器状态

Question

History.pushState(data,title,url)

History.pushState({state:1}, "State 1", "?state=1")

假设我需要存储页码和排序顺序，那么我需要编写什么代码？

url 部分是强制性的 ?

当用户点击浏览器后退或前进按钮时如何恢复状态？

假设我有这样一个对象

var PageState= {
    PageNo:1,
    SortCol:"Name",
    SortOrder:"ASC"
};

我可以这样存储吗

History.pushState({state:PageState}, null, null); ?

当用户单击浏览器后退和前进按钮时，我如何使用 History.js lib 从浏览器历史记录中取回状态？

寻找代码示例。谢谢

Answer 1

URL 参数是必需的，因为它是附加到地址栏中基础 URL 的内容。如果你想保持相同的路径，但保存一个新的历史状态，你可以使用当前的 url：History.pushState(state, null, location.href).

当历史状态改变时，window 发出一个事件。

var PageState = {
    PageNo: 1,
    SortCol: "Name",
    SortOrder: "ASC"
};

History.pushState(PageState, null, location.href);

stateChangeHandler = function(event) {
    // This PageState is the same object defined above
    var PageState = event.state;
    var NewLocation = event.target.location.href;
};

// These two statements are nearly equivalent. Only one is needed.
window.onpopstate = stateChangeHandler;
window.addEventListener("popstate", stateChangeHandler);

进一步阅读：MDN popstate reference

关于使用 History.js 管理浏览器状态

Regarding using History.js to manage browser state

jquery

browser-history

history.js