Как сохранить данные при закрытие вкладки браузера. Отследить закрытие вкладки JS. - Веб студия IZIART

Разработка сайтов
индивидуальный дизайн

Главная » JS » Как сохранить данные при закрытие вкладки браузера. Отследить закрытие вкладки JS.

Как сохранить данные при закрытие вкладки браузера. Отследить закрытие вкладки JS.

js

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

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

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