Почему event.state на window.onpopstate пуст при нажатии с таким же адресом.href (или пустой)

При нажатии на историю и настройке данных без изменения URL-адреса:

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

.... а затем прослушать поп-событие и вызвать его, нажав кнопку "Назад" в браузере:

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

В большинстве случаев вы получите значение null вместо значения состояния, а не:

{
    stateName: "myStateName", 
    randomData: 0.34234234234
}

Как я могу это решить и почему это происходит?

Ответ 1

Это странная проблема, и, по моему мнению, она недостаточно документирована. У меня возникли проблемы с поиском решения этой проблемы. После часа расстроенного поиска в Google и попытки/решения различных решений я заметил, что он начал работать, когда я дважды нажал на состояние (или больше). Стало ясно, что event.state ссылается на второе последнее состояние, которое было нажато.

Таким образом, ответ на эту работу - дважды нажать, послушать.

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

Я надеюсь, что это помогает кому-то!