Событие onbeforeunload
Бывают ситуации, когда необходимо отследить уход пользователя со страницы и выполнить какое-либо действие.
Самое простое, чем можно воспользоваться, это отследить событие onbeforeunload — пользователь покидает страницу.
window.onbeforeunload = function() {
return false;
};
Браузеры расценивают переходы по ссылкам, обновление страницы как уход с нее, поэтому код выше выведет всплывающее окно с просьбой подтвердить уход при вышеперечисленных действиях, но это не позволяет нам отследить именно закрытие вкладки.
Данный способ все-таки позволяет отправить данные статистики например или поменять статус чего-либо при уходе со страницы.
К содержанию ↑С применением localStorage
Далее мы рассмотрим пример, как отследить именно закрытие вкладки. К сожалению, такого события в javascript нет, но можно доработать код и все получится.
Так же мы воспользуемся локальным хранилищем для наглядности при отслеживании изменения статуса, который будем менять при закрытии вкладки.
При заходе на сайт у нас будет в локальном хранилище записана запись с ключом status и значением true. Далее будет выполняться следующий код:
var linkClick = false;
$("a").bind("click", () => {
linkClick = true;
});
window.onbeforeunload = () => () {
if (!linkClick) {
localStorage.status = 'Закрыли вкладку';
}
};
Этот код будет отслеживать переходы по ссылкам и менять значение переменной linkClick на true, при клике на ссылках. Тем самым мы исключаем изменения записи в локальном хранилище при перезагрузке страницы (что так же считается уходом со страницы) из-за перехода по ссылке.
А дальше идет уже знакомое событие onbeforeunload, которое при уходе со страницы проверит, если значение переменной linkClick равно true, то был совершен переход по ссылке, а если false, то выполнится условие и запись в локальном хранилище изменится на Закрыли вкладку и следовательно была именно закрыта вкладка.
Тем самым мы записали в хранилище, что вкладка была закрыта и можем это проверить, обратившись снова к хранилищу, при повторном заходе пользователя на сайт.
К содержанию ↑С применением sessionStorage
Теперь рассмотрим пример с применением sessionStorage, а перед этим вспомним о различие local и session хранилища.
Период хранения данных в lacalStorage — бессрочный, а в sessionStorage до завершения сессии, то есть до закрытия вкладки, чем мы и воспользуемся.
При заходе на сайт у нас в хранилище сессий записана запись с ключом status и значением true. Далее будет выполняться следующий код:
if (!sessionStorage.getItem('status')) {
// выполняем какие-либо действия, вкладка была закрыта
}
Если запись в хранилище есть, то условие не выполнится, значит пользователь, возможно и переходил по ссылкам или перезагружал страницу, но не закрывал вкладку. Но вот если записи нет, то условие выполнится и это означает, что вкладка была закрыта.
Третий способ самый лучший на мой взгляд, но все зависит от задачи.