javascript - jQuery：尝试刷新或关闭浏览器时提示用户

Question

场景：我有一个 Web 应用程序，我将让用户 1 在表单 ( #div1) 中设置一些值并将其显示给下一个用户（在用户 1 之后没有关闭浏览器的情况下进入浏览器）（显示将显示在#div2而#div1将被隐藏）。但是，如果用户 2 刷新浏览器，所有值都将消失。

问题：当用户尝试刷新浏览器时，我如何提醒用户？Web 应用程序将打开Midori，Web 服务器将打开CherryPy。

或者有没有办法保存会话而不管刷新？如何？

Answer 1

你在寻找

window.onbeforeunload = function(){
    return "Are you sure you want to close the window?";
}

Answer 2

你问了两个问题。

首先，“当用户尝试刷新浏览器时，我如何提醒用户？”：

在一个beforeunload函数中，包括以下内容（显然是你想要的任何文本）：

confirm('If you refresh the page your data will be lost');

这将创建一个带有“确定”和“取消”按钮的警报。如果用户按下“确定”，页面将继续它正在做的事情（在你的情况下，刷新）；否则，它返回 false。

对于第二个问题，“或者有没有办法保存会话而不管刷新？”：是的。

编辑：你现在问了第三个问题，“如何？” 但这确实超出了 StackOverflow 问答格式的范围。快速回答是有几种方法，包括 cookie 和 DOM 存储以及使用后端。试一试，如果您遇到问题，请提出具体问题，我们会提供帮助。

Answer 3

https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

你需要使用onbeforeunload. 基本上，如果您的应用程序处于“忙碌”状态，您可以设置处理程序，该处理程序将询问用户他/她是否真的想离开；）

Answer 4

以下应该有效：

window.addEventListener("beforeunload", function (e) {
  var message = "Are you sure you want to leave?";

  (e || window.event).returnValue = message;     
  return message;                                
});

对于您问题的第二部分，有几种选择。可能最简单的是localStorage：

// after form updated
if (typeof Storage !== 'undefined') {
  localStorage.formData = formData // where formData is a string containing all the data from the form
}

// on page load (e.g. after refresh)
if (typeof Storage !== 'undefined') {
  populateForm(localStorage.formData); // where populateForm is a function that can take the string you saved and does what you want with it (sorry, I didn't really understand that part of the question)
}