我已经读过十几遍了,状态对象可以存在于多个键|值对中,并且它与新的历史条目相关联。 但是有人可以给我一个状态对象的好处的例子吗?它的实际用途是什么?我无法想象为什么不直接输入 {}
最佳答案
以这个小例子为例 - 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
事件和状态对象的用途:
- 我们将我们选择的颜色包含在我们的状态对象中
function doPushState (color) {
var state = { selectedColor: color }, // <--- here
title = "Page title",
path = "/" + color;
history.pushState(state, title, path);
};
- 然后我们监听
popstate
事件,这样我们就知道什么时候我们必须更新选择的颜色,这是这样的:
window.addEventListener('popstate', function (event) {
var state = event.state;
if (state) {
selectColor( state.selectedColor );
}
});
试试更新的例子:run fiddle : 我们的页面现在会在用户浏览历史记录时相应地更新。
关于html - pushState:状态对象到底是做什么用的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17612307/