卸载前保存 [英] Save before unload

问题描述

我有一个带有交互式画布的应用程序，想在用户退出页面之前在其上保存更改.

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

      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项，我需要完成的是/是确认.

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

使用我的代码，不会出现确认信息.因此localStorage为空...控制台显示阻止确认..."

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

推荐答案

方法-我

说明:

window.onbeforeload 执行处理程序中的所有内容，但实际上它关心的是将用作确认消息的return语句.当然，我们不能更改按钮标签.显示 onbeforeunload 对话框后，它会阻止所有内容(这就是提示被阻止的原因).因此，在下面的代码中，我们正在做的是使用 setTimeout 安排一次保存，方法是给出0毫秒，以便将其添加到事件循环中.

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.

现在，如果用户决定关闭标签，则 setTimeout 处理程序将永远不会运行.如果他们选择留下，则处理程序将运行&更改已保存.

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".

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.

希望这会有所帮助.

这篇关于卸载前保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！