How to execute the past function on clicking back in the browser?

Question

AJAX

Basically, there is this code:

.d-none {display:none}

<div id="main">Index page</div>
<div id="faq" class="d-none">Index page</div>

<li><a href="/" onclick="mainh()">Главная</a></li>
<li><a href="/faq" onclick="faqh()">FAQ</a></li>

Its functions:

function mainh(){
$('#main').removeClass('d-none');
$('#faq').addClass('d-none');

event.preventDefault();
history.pushState(null, null, '/');
$('title').text('NameSite - Index');
}
function faqh(){
$('#main').addClass('d-none');
$('#faq').removeClass('d-none');

event.preventDefault();
history.pushState(null, null, '/faq');
$('title').text('NameSite - FAQ');
}

In general, everything works, but how, when clicking on "back" in the browser, return the user to the previous function, since at the moment only the url in the browser line changes, and the functions are not executed

Answer 1

https://developer.mozilla.org/ru/docs/Web/API/Wind...