Javascript-Code ausführen bei Browser Go Back Button und History State auslesen

In einer One-Page Website mit Javascript ist es wichtig, dass der User mit dem Browser Back-Button nicht zurück auf die vorherige Seite kommt, sondern eine eigene Funktion der Applikation ausgeführt wird.

Mit diesem Code Stücken, kann man beim Laden der Seite einen History State setzen. Dann muss man bei jedem State Change der Website einen neuen History Punkt setzen. Der Zurück Knopf des Browser wird immer den nächst älteren State dann aufrufen.

Das Beispiel ist jetzt sehr rudimentär und enthält nur die wichtigsten Funktionen. Aber wenn der User hier den Zurück Knopf des Browsers drückt, wird ein Javascript ausgeführt. Das gibt dann den ersten State aus. Wenn der User auf den Forward Knopf drückt, wird der zweite State ausgegeben.

const url         = ""; // <- No URL Change
const unused      = ""; // this param is literally unused @see https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
let history_state = {}; 
 
// Call this on initial load - create first history-point to go back to
history_state = { 'my-var':'value-01' };
history.pushState( history_state, unused, url );
 
// Call this on View Change - create new history-point to go forward to
history_state = { 'my-var':'value-02' };
history.pushState( history_state, unused, url );
 
// Event Listener
window.addEventListener( 'popstate', on_browser_history_state_change )
 
// Handle History Push and Pop
function on_browser_history_state_change( event ){
	console.log( event.state );
	// --> Call further Functions here <--
}
 
// back-button » console » { 'my-var':'value-01' }
// forward-button » console » { 'my-var':'value-02' }

Der zweite Parameter von history.pushState(…) ist scheinbar tatsächlich ungenutzt. So steht es in der Doku von MDN.