卸载前保存

Question

我有一个带有交互式画布的应用程序，并希望在用户退出页面之前保存对它的更改。

我的方法

      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;
            }
      }

我叫它

    window.onbeforeunload = saveBeforeUnload;

如果用户想要使用当前配置挖掘localStorage项目，我需要完成的是是/否确认。

问题

使用我的代码，确认不会出现。因此localStorage是空的...... 控制台说＆＃34;阻止确认...＆＃34;

Answer 1

方法 - 我

说明：

window.onbeforeload执行处理程序中的任何内容，但它确实关心将用作确认消息的return语句。而且当然我们无法改变按钮标签。显示onbeforeunload对话框后，它会阻止所有内容（这就是阻止提示的原因）。因此，在下面的代码中，我们正在做的是我们使用setTimeout通过给出0毫秒来安排保存，以便将它添加到事件循环中。

现在，如果用户决定关闭选项卡，那么setTimeout处理程序永远不会运行。如果他们选择留下，那么处理程序就会运行。保存更改。

嗯，您可以执行以下操作：

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.

因此，如果用户选择留下来，则会保存更改，

这是一个有效的解决方案，但在我看来并不是最好的用户体验，因此我建议您保持自动保存更改，因为用户使用＆amp;如果需要，提供一个按钮来重置画布。此外，您不应该保存每一个更改，而是在特定的时间间隔内保持自动保存。如果用户尝试在该间隔之间关闭，则显示此对话框，说“您还有待处理的更改”。

方法 - II（你的方式）

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;

但这将是许多唠叨的对话。

希望这有帮助。