html - pushState:状态对象到底是做什么用的？

Question

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

Answer 1

以这个小例子为例 - run 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 );
    }
});

试试更新的例子:run fiddle : 我们的页面现在会在用户浏览历史记录时相应地更新。