Question

是否有可能将最后一个状态的html推送到历史堆栈，如下所示：

history.pushState(null, null, {html: $('body').html()});

更改窗口位置：

window.location = url;

现在从新的位置：

window.addEventListener('popstate', function(event) {
    // back to the last state - event.state.html
}
history.back() // That what's firing the popstate event?

Answer 1

我搜索了将最后一个状态的html推送到历史记录的请求，但没有得到满意的答案。但我对你有一个想法，为什么你不把它推到历史之前保存州的html？这很可能使用客户端（cookie）或服务器端（会话）变量，即使在历史记录中推回了这些变量之后也可以检索这些变量。

Answer 2

pushState方法将state对象作为第一个参数，在那里传入null：

pushState（）方法的示例

var stateObj = {foo：“bar”};

history.pushState（stateObj，“page 2”，“bar.html”）;

对于您的示例：

//object goes in first argument
history.pushState({ html: $('body').html() }, "Title of Page", "Url to update address bar" );

//On PopState, you have access to event.state
window.addEventListener('popstate', function(event) {
    var priorStateObj = event.state;
    console.log(priorStateObj.html);
}

我担心的是，您似乎希望将document.write() HTML重新发送到该页面？如果是这样，我会尽量避免这种情况，如本SO帖子中所述：Why is document.write considered a "bad practice"?

至于保存整个身体的HTML，这很棘手。例如，在Firefox中，限制为640千比特。如果您的HTML可能超过该数量（可能），您只需要保存可用于重新创建所需内容的信息。尝试使用JavaScript / jQuery /等填充页面所需的信息保存Object。

state对象可以是任何可以序列化的对象。因为 Firefox将状态对象保存到用户的磁盘，以便可以恢复它们用户重新启动浏览器后，我们将大小限制为640k 状态对象的序列化表示上的字符。如果你传递序列化表示大于的状态对象这个to pushState（），该方法将抛出异常。如果你需要比这更多的空间，鼓励你使用sessionStorage和/或 localStorage的。

这里有更多好消息：

https://developer.mozilla.org/en-US/docs/Web/API/History_API

从历史中弹出最后一个状态

2 个答案: