beforeunload로 페이지 이탈 감지하기

사용자가 회원가입이나 신청 프로세스 도중 페이지를 벗어나거나 새로고침할 경우 기존에 입력되는 모든 값이 초기화된다!

이를 의도한 사용자도 있겠지만, 실수로 눌려졌다면 좋은 사용자 경험을 줄 수 없을 것이다. 

 

beforeunload

사용자가 페이지를 떠나거나 닫을 때 발생하는 이벤트이다. 사용자가 페이지를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜 줄 때 사용한다.

새로고침, 뒤로 가기, 브라우저 닫기 등의 경우에 아래와 같이 실행된다!

window.addEventListener("beforeunload", (event) => {
	event.preventDefault();
});

 

안내 메시지를 변경할 수 있나 했는데 

일반적인 브라우저에서는 beforeunload 이벤트를 취소할 때 보이는 메시지를 커스터마이징 할 수 없다고 한다!

 

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

Window: beforeunload event - Web APIs | MDN