HTML5 历史仅存储一种状态答案

【问题标题】：HTML5 history storing only one stateHTML5 历史仅存储一种状态
【发布时间】：2015-06-14 12:10:25
【问题描述】：

我正在用 JS/PHP 开发一个 Google Maps AJAX 应用程序，并希望实现 HTML5 History API。我已经实现了自定义深度链接，因此可以使用漂亮的 URL 访问所有内容。

现在在 AJAX 上，我执行以下操作来存储历史记录：

var stateObj = { id: obj.id };
history.pushState(stateObj, null, obj.deeplink);

要在浏览器上检索它，我会这样做：

window.onpopstate = function(event) {
google.maps.event.trigger(markersArray[JSON.parse(event.state.id)], 'click');
};

但是，只存储了一个后退，所以当我多次点击后退时，它的调用与第一次后退时的调用相同。

怎么了？

更多解释

好的，看来我没有提供足够的代码。这是通用的onpopstate-listener：

//get popstate event
window.onpopstate = function(event) {
   console.log('onpopstate: '+JSON.parse(event.state.id));
    google.maps.event.trigger(markersArray[JSON.parse(event.state.id)], 'click');
    };

点击地图标记时，我会这样做：

//change URL, save state
history.pushState({ objId: obj.id }, obj.pagetitle, obj.deeplink);

当然，标记点击 onpopstate 的触发也会导致 history.pushState，所以我认为它会覆盖最后一个值。

在“历史”对象中，无论点击了多少标记，都只有一个对象。

【问题讨论】：

我怀疑覆盖 stateObj-object 是问题，但我认为 pushState 不会替换而是将对象推送到存储中......
太棒了，没有评论的投反对票。如果你能解释一下它有什么问题？！
您提供的代码很难判断。在你的不同步骤中stateObj 的输出是什么？
@MrUpsidown 我添加了其他信息，希望对您有所帮助。
看看this answer，最后看看history.js，这可能会帮助您支持不同的浏览器。

标签： jquery html google-maps-api-3 html5-history

【解决方案1】：

可能发生的情况是，当您单击元素时执行 .pushState() 但 onpopstate() 您只需调用 onclick() 函数，该函数再次推送相同的状态信息，让您永远使用该 ID。

作为一种解决方案，您应该只使用 .pushState() if (history.state.id != this.id) 或您当前的对象 id。

【讨论】：

这正是问题所在。谢谢