how to execute a function only when reload is clicked not cancel on beforeunload event in angular 2+?

Question

I implemented to save the changes on on refresh/close event as :

@HostListener('window:beforeunload', ['$event'])
  beforeunloadHandler(event) {
    //save the form to local storage
    event.returnValue = false;
    }

It is working fine but the save happens on both reload/cancel click.

Is there a way to differentiate between reload and cancel click?

The example here! shows the above warning on every page refresh and also on navigating backward using browser back button, But the same is only working for me for one time refresh and browser close event.

I am missing here something or chrome/firefox has restricted this onbeforeunload event to refresh and close?

Thanks.