Стрелки браузера

Перехват нажатий стрелок браузера чтобы что-то обновить на страничке.

Как вы наверно уже знаете, мини-веб-приложения на одной страничке, использующие технологию AJAX, т.е. динамическую подгрузку данных с сервера, очень не любят нажатия стрелки "Назад" - все введенные данные и изменения на страничке сбрасываются из-за перехода к предыдущей. Но это можно победить если использовать в URL указание якоря, т.е. суффикса типа #step1, #step2. Тогда браузер даже в пределах одной страницы запоминает переходы. И мы можем это использовать чтобы делать свое мини-приложение совместимым с нажатием этих кнопок. Потому что большинство пользователей сайтов ничего не слышали про AJAX и жмут стрелку "Назад" как их научили чтобы вернуться на предыдущий шаг, не понимая что скорее всего придется повторять все шаги с самого начала. И всяческие объяснения что надо их жать с умом не помогают.

Вообще, нижеприведенный код в большинстве случаев вам и не пригодится, если у вас конечно нет чего-то типа хлебных крошек по шагам, которые будут отображать неверное текущее положение при нажатии кнопки "Назад". Вот именно для таких редких случаев и нужен перехват чтобы исправить крошки.

// Навигация стрелками браузера - фикс активного пункта
window.addEventListener( "popstate", function( e ) {
	// Очищаем без всяких проверок чтобы не подсвечивало на #start
    document.querySelectorAll( "aside a" ).forEach( function( el ) {
    	el.classList.remove( "active" );
    } );
    // Определяем текущее местоположение
    let target = window.location.hash;
    let a = document.querySelector( `aside a[href="${target}"]` );
    if ( a ) {
    	a.classList.add( "active" );
    }
} );