When Controller is Hit, Before beforeunload or after unload? .NET CORE Javascript

Question

I have a temporary data, and give that temporary data id with "underscore"

then i have function in my .NET Core Controller called CleanTempData.

Then i have a simple line code to delete the temporary data when user close the tab, or back to previous page.

My code is:

$(window).on("beforeunload", function () { if (pageDirty) return ("") });
$(window).on("beforeunload", function () {
    if (pageDirty) {
        navigator.sendBeacon(
        "@Url.Action("CleanTempData" );
    }
});

Its working normally, when i close or go back the temp data will deleted. And if i refresh the page, the temp data is not deleted as i want.

But i if i have change my code like this:

$(window).on("beforeunload", function () { if (pageDirty) return ("") });
$(window).on("unload", function () {
    if (pageDirty) {
        navigator.sendBeacon(
        "@Url.Action("CleanTempData" );
    }
});

My question is, why when i refresh the page, the temp data is deleted too? Not like when i use beforeunload.

Actually when that my CleanTempData will hit? Please give me an explain for the lifecycle. Im using Chrome.

My expectation is i just want to more understand about unload an beforeunload with navigator.sendBeacon.