Jquery ui 如何改进“取消”按钮的行为并使“关闭”与“取消”一样工作？

我正在为web应用程序中不同模块的设置和更新参数设置一个小窗口，为此，我使用一个jQueryUI对话框，在该对话框中加载每个模块的设置。我的问题是，如果您点击“取消”按钮，它会将所有配置重置为初始状态，即使我以前做过更改并在再次打开对话框并取消之前保存了这些更改。
另外，我希望关闭“X”按钮与取消按钮具有相同的行为

    var appDiv = $(Container).find(".divAppAdmin")[0];
var backupDiv = appDiv.innerHTML;

var closedFunction = function() {
    $(appDiv).dialog( "destroy" );
};
var closeFunction = function() {
    $(appDiv).dialog( "close" );
    $(Container).append(appDiv);
};
var cancelFunction = function() {
    $(appDiv).dialog( "close" );
    appDiv.innerHTML = backupDiv;
    $(Container).append(appDiv);
}
$(appDiv).dialog({
    "modal": true,
    "title": "Edit",
    "close": closedFunction,
    "buttons": {
        "Save": closeFunction,
        "Cancel": cancelFunction
    },
    "minWidth": 600
});

一步一步：
1.打开对话框并介绍一些更改，
2.保存更改，
3.再次打开对话框，不做任何更改，
4.点击按钮取消。
在这一点上，我丢失了之前所做的更改，并在步骤2中保存了这些更改，模块将返回到步骤1之前的状态

我知道使用

    appDiv.innerHTML = backupDiv;

在这种特定情况下会导致更改丢失，但如果我真的要撤消任何修改，它可以正常工作

编辑：
我一直在挖掘，到目前为止，我找到了将取消行为复制到关闭“X”按钮（）的解决方案：

---

通过在closedFunction（）中添加此if子句，我可以通过点击“X”按钮或按ESCAPE键捕获对话框何时关闭，然后我可以在if中调用cancelFunction（），现在与点击Cancel按钮相同。

考虑这个半基本的示例

    var appDiv = $(Container).find(".divAppAdmin")[0];
var backupDiv = appDiv.innerHTML;

var closedFunction = function() {
    $(appDiv).dialog( "destroy" );
};
var closeFunction = function() {
    $(appDiv).dialog( "close" );
    $(Container).append(appDiv);
};
var cancelFunction = function() {
    $(appDiv).dialog( "close" );
    appDiv.innerHTML = backupDiv;
    $(Container).append(appDiv);
}
$(appDiv).dialog({
    "modal": true,
    "title": "Edit",
    "close": closedFunction,
    "buttons": {
        "Save": closeFunction,
        "Cancel": cancelFunction
    },
    "minWidth": 600
});

$（函数（）{
var appDiv=$（“#appDialog”）；
功能设置{
$（“.settingid”，appDiv.val（s.id）；
$（“.settingname”，appDiv）.html（s.label）；
$（“.setting value”，appDiv）.val（s.value）；
应用程序对话框（“打开”）；
}
函数saveSetting（）{
var sid=$（“.setting id”，appDiv.val（）；
var v=$（“.settingvalue”，appDiv.val（）；
$（“#”+sid）。数据（“值”，v）；
}
函数resetDialog（）{
$（“.settingid”，appDiv.val（“”）；
$（“.settingname”，appDiv.html（“”）；
$（“.setting value”，appDiv.val（“”）；
}
appDiv.dialog({
自动打开：错误，
莫代尔：是的，
最小宽度：300，
按钮：[{
文字：“保存”，
图标：“ui图标检查”，
类：“ui优先级主”，
单击：函数（）{
保存设置（）；
应用程序对话框（“关闭”）；
}
}, {
文本：“取消”，
图标：“ui图标关闭”，
单击：函数（）{
应用程序对话框（“关闭”）；
}
}],
关闭：功能（e、ui）{
重置对话框（）；
}
});
$（“.app.edit setting”）。按钮（）。单击（函数（e）{
var that=$（this.parent（）；
变量设置={
id:that.attr（“id”），
label:$（“label”，即）.text（），
值：即。数据（“值”）
};
编辑设置（设置）；
});
$（“表格”，appDiv）.submit（函数（e）{
e、 预防默认值（）；
保存设置（）；
应用程序对话框（“关闭”）；
});
$（“.app>.save”）。按钮（）。单击（函数（）{
变量设置={}；
$（“.app li”）。每个功能（ind，el）{
var k=$（el.attr（“id”）；
var v=$（el）.数据（“值”）；
设置[k]=v；
});
//将设置保存到存储器
控制台日志（设置）；
});
});
.app ul{
利润率：10px；
填充：0；
列表样式：无；
宽度：300px；
}
.app ul li{
边框：1px实心#CCC；
填充：.5em；
边缘底部：-1px；
}
.app ul li：第一个孩子{
边界半径：3px3px0；
}
李：最后一个孩子{
边界半径：0 0 3px 3px；
}
.应用ul li标签{
显示：内联块；
宽度：200px；
}
.app.save{
左边距：10px；
}


设置1编辑
设置2Edit
设置3编辑

: 
保存设置
欢迎来到StackOverflow。请提供一个最小、完整且可验证的示例：是否尝试使用本地存储？或者你只是想添加一些html元素？@stanchacon不清楚OP的意图是什么，他没有说明。他们可以将数据推送到会话、数据库、本地存储或cookie。这完全取决于OP。我的意思是，本地存储是保存数据的一个很好的选择。谢谢@Twisty，你的解决方案真的帮了我很大的忙。