Why is event.state on window.onpopstate empty when pushing with same location.href (or empty)

Question

When pushing to history and setting data without changing URL:

window.history.pushState({
    stateName: "myStateName", 
    randomData: window.Math.random()
}, "myStateName", location.href);

.... and then listen to the pop event and trigger it by pressing the Back button in the browser:

window.onpopstate = function(event) {
  console.log(event.state); //logs null
}

You will most of the time get null as the state value instead of:

{
    stateName: "myStateName", 
    randomData: 0.34234234234
}

How can I solve this and why does this happen?

Answer 1

This is a weird issue and according to me, it's not documented enough. I had loads of trouble with looking for a solution to this problem. After an hour of frustrated googling and trying/coming up with different solutions I noticed that it started working when I pushed the state twice (or more). It became clear that event.state referred to the second last state that was pushed.

So the answer to making this work is to push twice, listen once.

window.history.push(..);
window.history.push(..);

I hope this helps someone!