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会更改.现在如果单击后退按钮会发生什么？

浏览器确实可以追溯到历史,但我们的页面没有注意到 - 网址从'/ blue'变回'/ green',但我们的页面仍然是'你选择了蓝色'.我们的网页与网址不同步.

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

1. 我们在州对象中包含我们选择的颜色

   function doPushState(color) {
       var state = { selectedColor: color },
           title = "Page title",
           path  = "/" + color;
   
       history.pushState(state, title, path);
   };
   

2. 然后我们监听popstate事件,以便我们知道何时必须更新所选颜色,(在jQuery中)是这样的:

   $(window).on('popstate', function(event) {
       var state = event.originalEvent.state;
   
       if (state) {
           selectColor( state.selectedColor );
       }
   });
   

尝试更新的示例:运行小提琴(编辑器视图):当用户浏览历史记录时,我们的页面现在会相应地更新.