我已经读了十几次,现在状态对象可能存在多个键|值对,并且它与新的历史记录条目相关联。
但有人可以给我一个国家对象的好处的例子。它的实际用途是什么?我无法想象为什么不只是输入{}
但有人可以给我一个国家对象的好处的例子。它的实际用途是什么?我无法想象为什么不只是输入{}
谢谢你减轻我黑暗的黑暗大脑
解决方法
拿这个小例子:
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):当用户浏览历史记录时,我们的页面现在将相应更新。