html5 – pushState:什么是状态对象?

前端之家收集整理的这篇文章主要介绍了html5 – pushState:什么是状态对象?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经读了十几次,现在状态对象可能存在多个键|值对,并且它与新的历史记录条目相关联。
但有人可以给我一个国家对象的好处的例子。它的实际用途是什么?我无法想象为什么不只是输入{}

谢谢你减轻我黑暗的黑暗大脑

解决方法

拿这个小例子: run fiddle( editor view):

您有一个用户可以选择颜色的页面。每当他们做,我们生成一个新的历史条目:

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

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

我们现在将状态对象留空,并将URL设置为颜色名称(不要重新加载页面 – 该URL不存在,因此您将获得404)。

现在点击一个红色,绿色和蓝色一次。请注意,URL更改。现在如果您点击后退按钮会发生什么?

浏览器确实回到了历史记录,但是我们的页面并没有注意到 – URL从’/ blue’改回’/ green’,但是我们的页面保持在’你选择了蓝色’。我们的网页与网址不同步。

这是window.onpopstate事件和状态对象是为了:

>我们在我们的状态对象中包含我们选择的颜色

function doPushState(color) {
    var state = { selectedColor: color },path);
};

>然后我们听popstate事件,所以我们知道什么时候我们必须更新所选颜色,哪个(在jQuery)是这样的:

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

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

尝试更新的示例:run fiddle(editor view):当用户浏览历史记录时,我们的页面现在将相应更新。

猜你在找的HTML5相关文章