pushState：状态对象到底是做什么用的？

Question

我已经读过十几遍了，状态对象可以存在多个键|值对，并且它与新的历史条目相关联。但是有人可以给我一个状态对象的好处的例子吗？它的实际用途是什么？我无法想象为什么不直接输入 {}

原文由 campari 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以这个小例子为例—— 运行 fiddle ：

您有一个页面，用户可以在其中选择颜色。每次他们这样做，我们都会生成一个新的历史条目：

 function doPushState (color) {
    var state = {},
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

我们暂时将状态对象留空，并将 URL 设置为颜色名称（不要重新加载页面 - 该 URL 不存在，因此您将得到 404）。

现在各点击一次红色、绿色和蓝色。请注意，URL 发生了变化。现在如果你点击后退按钮会发生什么？

浏览器确实返回了历史记录，但我们的页面没有注意到这一点——URL 从“/blue”变回“/green”，但我们的页面停留在“You have selected blue”。我们的页面与 URL 不同步。

这就是 window.onpopstate 事件和状态对象的用途：

1. 我们将我们选择的颜色包含在我们的状态对象中

function doPushState (color) {
    var state = { selectedColor: color }, // <--- here
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

1. 然后我们监听 popstate 事件，这样我们就知道什么时候我们必须更新选择的颜色，这是这样的：

 window.addEventListener('popstate', function (event) {
    var state = event.state;

    if (state) {
        selectColor( state.selectedColor );
    }
});

尝试更新的示例： 运行 fiddle ：当用户通过历史导航返回时，我们的页面现在会相应更新。

原文由 janfoeh 发布，翻译遵循 CC BY-SA 4.0 许可协议