Failed to execute 'pushState' on 'History' error when using window.history.pushState function

Question

I'm using window.history in JavascriptMVC application to enable back/forward/refresh functionality for each controller. Every time I load a new controller I'm using window.history.pushState to add a new state to history. And then on back/refresh I'm using the saved state and reuse the data to build the controller again.

The whole idea works fine excepting one issue on specific scenario. I'm getting the following error:

Failed to execute 'pushState' on 'History': An object could not be cloned.

The same data is added without problem on other scenario. What can cause this error? Thanks for the assistance.

Answer 1

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

"The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage."

Looks like the simple answer is that possible the state you are passing in is serializing to larger than 640k. I just ran into this bug, and I am almost certain that is the cause.

Answer 2

window.history.pushState string size limit of 640k characters.

Better switch to localStorage or sessionStorage.

Source: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Answer 3

Try to pass the object in a queryParams:

this.router.navigate(['yourRoute'], { queryParams: objectToPass});

That works for me.