Let's talk about JavaScript web page closing events

JavaScript webpage closing event

With the popularity of the global Internet, webpage applications are becoming more and more popular. In order to improve user experience, we need to master some webpage interaction technologies. Among them, the webpage closing event is a very important event, which can help us perform some specific operations before the webpage is closed, such as submitting data, saving user information, etc.

This article will introduce the web page closing event in JavaScript, and provide some practical examples and techniques to help readers better learn and understand this event.

1. The meaning of web page closing event

The web page closing event means that when the user closes the current web page, the browser will trigger the event, so that specific actions can be executed through JavaScript operate. These operations can include data submission, cache clearing, cookie deletion, and more.

In traditional web applications, the web page closing event is not an important event, because the web page is only used to display information and does not need to respond to user operations. But in modern web applications, we need to interact with users through web pages and save user data in a timely manner. At this time, web page closing events are very important.

2. How to use the web page closing event

In JavaScript, you can use the beforeunload event of the window object to respond to the web page closing event. This event is fired just before the browser unloads the document. In the beforeunload event, you can perform some cleanup operations, save data, etc.

The following is the basic usage of the beforeunload event:

window.addEventListener('beforeunload', function(event) {
   event.preventDefault(); // 阻止默认行为
   event.returnValue = ''; // 设置returnValue，可以提示用户是否离开
});

In the above code, we add the beforeunload event to the window object through the addEventListener() method. In the event handler, we can perform some cleanup operations and prevent the browser's default uninstall behavior.

Sometimes, we need to get the data entered by the user in the close event, such as the information entered in the form. At this time, we can use the onbeforeunload event:

window.onbeforeunload = function(event) {
   var message = '您输入的内容尚未保存，确定要退出吗？';
   event.returnValue = message; // 设置提示消息
   return message; // 返回提示消息，可以在一些浏览器中生效
};

In the above code, we set the prompt message by setting the event.returnValue attribute, and return the same prompt message to ensure that it can take effect in some browsers .

3. Practical Cases

The following are some practical cases that demonstrate how to use web page closing events to improve user experience:

1) Save form data

When the user enters some information in the form, if it is not saved, the information will be lost. We can automatically save form data when the web page is closed. For example:

window.addEventListener('beforeunload', function() {
   var inputBox = document.getElementById('input-box');
   localStorage.setItem('user-input', inputBox.value);
});

In the above code, we use localStorage to save the form data. In the beforeunload event, we get the value of the input box and save it to local storage.

2) Submit form data

In some specific scenarios, it may be necessary to send data to the server when the web page is closed. For example, after a user fills in information in a form, if the user closes the web page, the data will be lost, so we can submit the data before the web page is closed. For example:

window.addEventListener('beforeunload', function() {
   var formObj = document.getElementById('my-form');
   formObj.submit();
});

In the above code, we call the submit() method of the form object to submit the form data. The browser will automatically send this data to the server before the web page is closed.

3) Clear cache data

If the web page contains a large number of pictures and videos, the browser's cache may occupy a lot of disk space. In order to reduce disk space usage, we can clear cache data when closing the web page. For example:

window.addEventListener('beforeunload', function() {
   window.localStorage.clear();
   window.sessionStorage.clear();
   window.indexedDB.deleteDatabase('my-database');
});

In the above code, we use localStorage and sessionStorage to save web page cache data. In the beforeunload event, we use the clear() method to clear this data. Additionally, we use the indexedDB.deleteDatabase() method to delete the index database.

4) Detect whether the user exits

If the user unfortunately closes the browser while browsing the web, some data may be lost. To avoid this, we can detect if the user really wants to exit when the page is closed. For example:

window.addEventListener('beforeunload', function(event) {
   var message = '您输入的内容尚未保存，确定要退出吗？';
   event.returnValue = message;
   return message;
});

window.addEventListener('unload', function() {
   alert('您已经成功退出本网站！');
});

In the above code, we set the prompt message in the beforeunload event, and prompt the user to have successfully exited in the unload event. At the same time, we return the same prompt message to ensure that it can take effect in some browsers.

4. Summary

The webpage closing event is a very important event that can help us perform some specific operations before the webpage is closed. In JavaScript, we can use the beforeunload event and onbeforeunload event of the window object to respond to the web page closing event. By mastering the use of web page closing events, we can provide users with a smoother web page interaction experience.

In addition to the use cases introduced in this article, there are many other application scenarios that can use web page closing events, and readers can flexibly apply them according to their own needs.

The above is the detailed content of Let's talk about JavaScript web page closing events. For more information, please follow other related articles on the PHP Chinese website!