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

Posted 2023-02-22

【中文标题】在 SessionStorage 中未保存更改时警告用户

【英文标题】：Warn user when unsaved changes in SessionStorage

【发布时间】：2018-11-28 22:51:55

【问题描述】：

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

【问题讨论】：

Intercept page exit event的可能重复

【参考方案1】：

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

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