Как перехватить кнопку “назад” браузера?

#javascript #http #button #кэширование #браузер

На странице используется JavaScript, пользователь может изменить вид страницы. При
переходе по ссылке на другую страницу того же сайта и затем нажатии на кнопку "Назад"
браузера, теряются сделанные пользователем изменения на первой странице.

Как перехватить событие возврата на страницу, чтобы можно было ее обновить?
    

Ответы

Ответ 1

В комментариях верно написали, что ответ кроется не в перехвате события "назад" у
браузера, а сохранении состояния страницы

Например, пользователь может изменить тему страницы. Что бы при возвращении на эту
страницу, была выбрана нужная тема, сохраним ее в localStorage

const savePageState = (name, state) => {
    localStorage[name] = state;
}

const loadPageState = (name) => {
    return localStorage[name];
}


Дальше, при нужных вам событиях, вы просто сохраняете в localStorage нужные вам данные,
а при загрузке страницы (onload событие, например) выгружаете нужные данные и используете их


Ответ 2

Раз пользователь может изменить вид страницы, значит, работает javascript. В нем
надо при обработке пользовательских действий подменить последний элемент в истории
браузера, чтобы возврат происходил уже на указанную вами страницу (или тот же адрес,
но с параметрами).

Вот пример.

Код скрипта:

$('.portfolio_filter').each(function(){
    var $this_filter = $(this);

    $this_filter.on('click', 'a', function(){
        var project_type = $(this).data('optionValue').slice(1);
        var url = window.location.href;
        if (url.indexOf('?') >= 0) {
            url = url.slice(0, window.location.href.indexOf('?'));
        }
        if (project_type) {
            url = url + '?type=' + project_type;
        }
        // console.log('url: ' + url);
        window.history.replaceState(null, document.title, url);
        return false;
    });
});


При клике не кнопку на странице в историю дописывается url типа http://sws-group.zephyrlab.ru/projects/?type=commercial
После просмотра проекта категории commercial возврат идет уже на url с ?type=commercial.


Ответ 3

Перехватить событие возврата на страницу не получилось, задача решена другим способом.

Я добавил на стороне сервера в http-заголовок Cache-Control значения no-store, must-revalidate,
как написано здесь: https://stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers

Таким образом, при нажатии "Назад" страница автоматически обновляется браузером вообще
без использования дополнительного кода JavaScript. Сделанные пользователем изменения
при этом не теряются, т.к. они до этого были сохранены на сервере.

При обновлении страницы по F5 также получаем с сервера самое последнее состояние
страницы.

Если бы состояние хранилось не на сервере, пришлось бы дописать немного JavaScript-кода
(для работы с localStorage или куками), но history.replaceState я бы использовать не
стал. Вместо хранения состояния (на стороне клиента) в history, гораздо удобнее хранить
то же самое состояние в localStorage.