在页面刷新前提交表单最佳实践

昨天晚上写了一篇文章，快写完时由于误按CTRL+R键导致页面强制刷新，结果文章化为乌有，由于很晚了后来没有重新写就睡觉了。睡着之前还在手机上查询网页刷新前提交表单的方案。

今天午饭过后就开始着手解决这个问题，先是问了AI页面刷新前提交表单的方案，然后尝试的第一个方案是监听beforeunload事件，然后根据表单id手动提交。代码示例如下：

window.addEventListener('beforeunload', function (e) {
  // 此处省略处理数据的代码
  // 获取表单元素
  let articleForm = document.getElementById('articleForm');
  // 提交表单
  articleForm.submit();
});

在网页中测试后发现并没有将表单数据提交到服务端，也有尝试加一些console.log打印语句及alert弹框提示，发现alert弹框会被阻止，console.log语句有在控制台打印出来，但是页面刷新后，服务端并没有接收到表单数据。经过询问AI后得知，提交表单到新url也会被浏览器阻止，目的是为了防止滥用禁止刷新行为。同时了解到有被浏览器接受的更好的API方案可以实现刷新前提交表单到服务端，就是使用navigator.sendBeacon()这个新的API方法，这是专门为页面卸载时发送数据设计的 API，异步且可靠。改造代码如下：

window.addEventListener('beforeunload', function(e) {
  // 此处省略处理表单数据的代码
  // 收集表单数据
  const articleFormData = new FormData(document.getElementById('articleForm'));
  
  // 使用 sendBeacon 发送数据
  navigator.sendBeacon('/action/saveForm', articleFormData);
  
  // 允许页面正常关闭
  return undefined;
});

经过在页面上测试，发现完美实现在刷新前提交表单到服务端。