使用 window.history.pushState 函数时无法在“历史”错误上执行“pushState”

Posted 2023-02-22

【中文标题】使用 window.history.pushState 函数时无法在“历史”错误上执行“pushState”

【英文标题】：Failed to execute 'pushState' on 'History' error when using window.history.pushState function

【发布时间】：2014-08-17 00:47:01

【问题描述】：

我在 javascriptMVC 应用程序中使用window.history 为每个控制器启用后退/前进/刷新功能。每次我加载一个新控制器时，我都会使用window.history.pushState 向历史记录添加一个新状态。然后在返回/刷新时，我使用保存的状态并重用数据来再次构建控制器。

除了特定场景中的一个问题外，整个想法都很好。我收到以下错误：

无法在“历史记录”上执行“pushState”：一个对象不能被 克隆。

在其他情况下添加相同的数据没有问题。什么会导致此错误？ 感谢您的帮助。

【参考方案1】：

window.history.pushState 字符串大小限制为 640k 个字符。

最好切换到localStorage 或sessionStorage。

来源：https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

【参考方案2】：

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

“状态对象可以是任何可以序列化的对象。因为 Firefox 将状态对象保存到用户的磁盘中，以便在用户重新启动浏览器后可以恢复它们，所以我们对序列化表示的state 对象。如果您将序列化表示大于 this 的 state 对象传递给 pushState()，该方法将抛出异常。如果您需要比这更多的空间，建议您使用 sessionStorage 和/或 localStorage。"

看起来简单的答案是您传入的状态可能是序列化到大于 640k。我刚刚遇到了这个错误，我几乎可以肯定这就是原因。

【讨论】：

感谢您的回复。这个问题是由我试图保存和序列化的对象中的一些循环依赖引起的。在我删除循环依赖后，它就解决了。

我遇到了同样的问题，因为我将 DOM 元素传递给状态对象。不是一个好主意。感谢您的回答：真的很有帮助。

使用 Knockout 时遇到同样的错误，因为我没有取消对 observable 的引用 - 在我应该推送 ID() 时尝试推送 ID