首先得理清你之前尝试失败的核心问题：

• onbeforeunload 事件里触发表单提交是异步操作，浏览器会直接终止页面卸载前的异步任务，所以提交根本没法完成。
• 直接在window.onload里提交，如果表单是动态加载的（哪怕后来硬编码了，也可能遇到DOM还没完全渲染的情况），代码执行时表单元素还不存在，自然没反应。

下面是可行的分步实现方案：

步骤1：实时保存用户输入到本地存储 #

用户在comment文本框输入内容时，把内容实时存在localStorage里，确保页面重载后输入不会丢失：

// 监听textarea的输入事件，实时保存内容
document.addEventListener('DOMContentLoaded', function() {
  const commentTextarea = document.getElementById('comment');
  if (commentTextarea) {
    // 页面加载时先恢复之前保存的内容
    const savedComment = localStorage.getItem('unsaved_comment');
    if (savedComment) {
      commentTextarea.value = savedComment;
    }

    // 输入时实时保存到本地存储
    commentTextarea.addEventListener('input', function() {
      localStorage.setItem('unsaved_comment', this.value);
    });
  }
});

步骤2：页面重载时自动提交表单 #

页面加载完成后，判断是否是重载触发的加载，同时检查用户有没有手动提交过表单（用一个标记区分），如果满足条件就自动提交：

document.addEventListener('DOMContentLoaded', function() {
  const commentForm = document.getElementById('commentform');
  const submitBtn = document.getElementById('submit');
  const savedComment = localStorage.getItem('unsaved_comment');

  // 判断是否是页面重载（performance.navigation.type === 1 代表重载操作）
  const isReloaded = performance.navigation.type === 1;

  // 标记用户是否手动点击过提交按钮
  let isManualSubmit = false;
  submitBtn.addEventListener('click', function() {
    isManualSubmit = true;
  });

  // 满足三个条件：是重载、有保存的评论内容、用户没手动提交过，就自动提交表单
  if (isReloaded && savedComment && !isManualSubmit) {
    commentForm.submit();
  }

  // 不管手动还是自动提交成功后，清除本地存储的内容，避免重复提交
  commentForm.addEventListener('submit', function() {
    localStorage.removeItem('unsaved_comment');
  });
});

关键细节说明 #

• 用DOMContentLoaded而非window.onload：前者在DOM渲染完成就执行，后者要等所有资源加载完，能更早获取到动态加载的表单元素。
• 依赖localStorage存输入：页面重载后原页面的内存数据会丢失，本地存储是唯一能留存用户输入的方式。
• 加入isManualSubmit标记：避免用户手动提交后，页面重载时重复提交相同内容。
• 提交后清除本地存储：防止下次页面加载时误提交旧的评论内容。

整合后的完整代码 #

把上面两段代码合并，放在表单所在页面的底部（或者DOM加载完成的钩子中）：

document.addEventListener('DOMContentLoaded', function() {
  const commentTextarea = document.getElementById('comment');
  const commentForm = document.getElementById('commentform');
  const submitBtn = document.getElementById('submit');

  // 处理评论内容的保存与恢复
  if (commentTextarea) {
    const savedComment = localStorage.getItem('unsaved_comment');
    if (savedComment) {
      commentTextarea.value = savedComment;
    }

    commentTextarea.addEventListener('input', function() {
      localStorage.setItem('unsaved_comment', this.value);
    });
  }

  // 处理页面重载时的自动提交逻辑
  if (commentForm && submitBtn) {
    const isReloaded = performance.navigation.type === 1;
    const savedComment = localStorage.getItem('unsaved_comment');
    let isManualSubmit = false;

    submitBtn.addEventListener('click', function() {
      isManualSubmit = true;
    });

    if (isReloaded && savedComment && !isManualSubmit) {
      commentForm.submit();
    }

    // 提交完成后清除本地存储的内容
    commentForm.addEventListener('submit', function() {
      localStorage.removeItem('unsaved_comment');
    });
  }
});

测试注意事项 #

• 测试时先在文本框输入内容，然后手动刷新页面（模拟重载），此时应该会自动提交表单。
• 如果用户手动点击过Submit按钮，之后再刷新页面，不会触发自动提交，符合需求。

内容的提问来源于stack exchange，提问作者SoberStoner