I am creating a web app to save data to MySQL database. now I need to save data when the browser closes. I used the ajax function to call my PHP web services. I used onunload event to detect the browser close event. My problem is when the browser close it fire the onunload event but does not wait until the ajax function success. Because of that data is not saved to the database. When I put debug point on the onunload function it is working fine and save all the data to the database.
This is what I tried.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Testing data save on close event</h1>
</body>
</html>
<script>
window.onunload = function(e) {
console.log("The Window is closing!");
saveDataOnClose();
};
function saveDataOnClose(){
url = URL+"savedata.php";
var client = [{firstName: 'John', lastName: 'doe', EmailAddress: 'jhon@gmail.com'}];
var jObj = JSON.stringify(client);
$.ajax({
url: url,
type: "POST",
data: {
"Client": jObj,
},
success: function (result) {
var Id = result;
localStorage.setItem("result", Id);
},
error: function (xhr, errorType, exception) {
console.log("Store data on remote database", "Storing data on the remote database failed, " + xhr.statusText + " " + xhr.status + new Error().stack, false);
}
});
}
</script>
The window.onunload function is an special function, so actually asynchron code can be executed, but will be killed by the browser, when the tab has been closed which happens immediately.
A similar question has been answered here. The solution there could be with service workers, which handles the data in the background, even if your website is not opened.
But, what you could also do is to store the data to the localStorage object temporarily, which handles the data synchronous.
As soon as your user comes back to your website on the same device, you can check if there is any unsaved changes and sync it with your backend.
In your case, consider using the onbeforeunload event. What this event does is that it shows a confirmation box to the user when he is about to close the tab or reload the page or tries to move away from the current page.
<html>
<body onbeforeunload="return myFunction()">
<a href="https://www.google.com/">Click here to go to Google.com</a>
<script>
function myFunction() {
return "Return anything here.....";
}
</script>
</body>
</html>