javascript window event listener beforeunload run function depending on user choice-CodePudding

On a form where users have filled in a lot of information and uploaded files to a temporary directory, I want to delete this directory when the browser or tab is closed, but also when a link is clicked, a form is submitted, the backward/forward button is pressed, or the page is refreshed.

After reading up about https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

I thought this would be the right way to go forward, so I wrote/copied this:

window.addEventListener('beforeunload', (event) => {

    event.preventDefault();
    event.returnValue = ''; // Starting with Firefox 44, Chrome 51, Opera 38, and Safari 9.1, a generic string not under the control of the webpage will be shown instead of the returned string.

});

Now when the user clicks on leave or refresh I want to fire this function removeUserOwnItemImageTmpUploadDirectory();

But I don't know how to 'listen' to the user's choice and I can't find info or another SO question about it.

I tried using unload event like this which always fires on confirmation of the beforeunload if I understand the docs correctly: https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event

window.addEventListener('unload', (event) => {

    removeUserOwnItemImageTmpUploadDirectory();

});

Sadly, this did not work since the directory is still on the server. I tested the function and I know for a fact that it works. Because when you process the form it also calls this function and then all files are deleted.

I also tried using the pagehide event but also to no avail.

window.addEventListener("pagehide", (event) => {
  if (event.persisted) {
    /* the page isn't being discarded, so it can be reused later */
  } else {
    removeUserOwnItemImageTmpUploadDirectory();
  }
}, false);

It is not a requirement for me that your answer works with the above code, if you have a solution that works with other functions, but the result is the same then I would love to hear from you.

CodePudding user response：

Here is an updated version of the code that uses a modal or popup window to show the prompt to the user in modern browsers:

// Set the flag indicating that the temporary directory should be deleted
localStorage.setItem('shouldDeleteTempDir', 'true');

window.addEventListener('beforeunload', (event) => {
    // Check the flag
    if (localStorage.getItem('shouldDeleteTempDir') === 'true') {
        // Show a modal or popup window with the prompt message
        const result = window.confirm('Are you sure you want to leave?');

        if (result === true) {
            // The user has clicked "Leave", so delete the temporary directory here

            // Clear the flag
            localStorage.setItem('shouldDeleteTempDir', 'false');
        } else {
            // The user has clicked "Stay" or has cancelled the prompt, so don't delete the temporary directory

            // Clear the flag
            localStorage.setItem('shouldDeleteTempDir', 'false');
        }
    }
});

This code uses the window.confirm() method to show a modal or popup window with the prompt message when the user tries to leave the page. It then checks the value of the result variable to determine whether the user has clicked the "Leave" button or the "Stay" button (or has cancelled the prompt). If the user has clicked "Leave", the code will delete the temporary directory and clear the flag. If the user has clicked "Stay" or has cancelled the prompt, the code will not delete the temporary directory and will clear the flag.