在 SessionStorage 中未保存更改时警告用户

Question

我正在寻找一种方法来警告用户，如果他们在提交完整的表单之前从多页表单中导航离开（关闭浏览器，单击返回按钮）。驻留在不同页面路径上的表单的每个部分都保存在 SessionStorage 中。

我正在使用 onbeforeunload 事件来触发 “未保存的更改”对话框，但它不会在 Chrome 中触发，除非用户与页面交互并且因此未检查条件（如果存在 SessionStorage，则返回对话框）并且不显示对话框。

感谢任何替代方案、建议或智慧！

// Display dialog when user navigates away without submitting form
// isStoredData condition is never met in Chrome unless user interacts with page
window.onbeforeunload = function () {
  let isStoredData = sessionStorage.getItem("MyFormDataInSessionStorage");
  let isDirty = $scope.MyForm.$dirty;
  if (isDirty || isStoredData) {
    return "Your application will not be saved.";
  }
  return undefined; 
};

// Prevent unsaved changes dialog when form is submitted
$('form').submit(function () {
  window.onbeforeunload = undefined;
});

Answer 1

你应该像下面的 sn-p 那样使用 $(window).on:

$(window).on('beforeunload', function() {
   //Write your logic here.
});