Событие 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')) {
	// выполняем какие-либо действия, вкладка была закрыта
}

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

Третий способ самый лучший на мой взгляд, но все зависит от задачи.