Save before unload

Question

I'm having an application with an interactive canvas and want to save changes on it, before the user exits the page.

My approach

      function saveBeforeUnload(){ 
         if (confirm('Do you want to save the current state to clipboard?')) {
        /*yes*/  if (canvas.getObjects("rect").length > 0){
                    localStorage.setItem("clipboard_unfinishedconfig", JSON.stringify(canvas.toJSON(customProperties)));
                    return;
        /*no:*/  } else { 
                   localStorage.setItem("clipboard_unfinishedconfig", "");
                return;
            }
      }

I call it by

    window.onbeforeunload = saveBeforeUnload;

What I need to accomplish is a yes/no confirmation, if the user wants to ovverride the localStorage Item with the current configuration.

Problem

With my code, the confirm does not appear. Accordingly the localStorage is empty... console says "Blocked confirm..."

Answer 1

Approach - I

Explanation:

window.onbeforeload executes whatever is in the handler but it really cares about the return statement which shall be used as confirmation message. And Ofcourse we can't change the button labels. Once the onbeforeunload dialog is shown it blocks everything(that's why your prompt is blocked). So in the following code what we are doing is that we are scheduling a save using a setTimeout by giving 0 milliseconds, so that it is added to the event loop.

Now if the user decides to close the tab anyway that setTimeout handler never runs. If they choose to stay, the handler runs & the changes are saved.

Well, you can do the following:

function saveChanges () {
    localStorage.setItem("clipboard_unfinishedconfig", JSON.stringify(canvas.toJSON(customProperties)));
    alert("changes saved successfully !");
    window.onbeforeunload = null;
}

function exitConfirmation () {
    setTimeout( saveChanges, 0 );
    return "There are unsaved changes on this canvas, all your changes will be lost if you exit !";
}

window.onbeforeunload = exitConfirmation(); //Basically set this whenever user makes any changes to the canvas. once the changes are saved window.onbeforeunload is set back to null.

So, If the user chooses to stay back, the changes will be saved,

This is a working solution, but not the best user experience in my opinion, so what I suggest is that you keep auto saving the changes as the user makes & give a button to reset the canvas if required. Also you should not save on every single change, but instead keep auto saving in a specific interval of time. If the user tries to close between that interval then show this dialog saying "you have pending changes left".

Approach - II ( Your way )

function saveConfirmation () {
     if (confirm('Do you want to save the current state to clipboard?')) {
        if (canvas.getObjects("rect").length > 0){
            localStorage.setItem("clipboard_unfinishedconfig", JSON.stringify(canvas.toJSON(customProperties)));
        } else {
            localStorage.setItem("clipboard_unfinishedconfig", "");
            return;
        }
    }
}
function saveBeforeUnload(){
    setTimeout( saveConfirmation, 0 );
    return "You have unsaved changes";
}
window.onbeforeunload = saveBeforeUnload;

But this will be to many nagging dialogs.

Hope this helps.