Chrome标签页恢复时表单值残留问题：原因及脚本方案咨询

兄弟，这确实是Chrome的默认浏览器行为——它会悄悄保存表单字段的状态，哪怕你用JavaScript在关闭标签页前重置了表单，恢复页面时还是会把之前输入的内容填回去。Firefox在这方面的处理就更贴合预期，不会保留这类状态。

不过别担心，我们可以通过几种脚本方法来强制Chrome在恢复标签页时清除表单值，下面是具体方案：

• 给表单/字段加autocomplete="off"属性
  直接在表单或者单个输入字段上添加autocomplete="off"，明确告诉Chrome不要自动填充或保存这个字段的状态。示例代码：

  <!-- 全局表单禁用自动填充 -->
  <form autocomplete="off">
    <input type="text" name="username">
    <textarea name="content"></textarea>
  </form>
  
  <!-- 单个字段禁用 -->
  <input type="email" name="user-email" autocomplete="off">
  

  注意：Chrome有时候会忽略表单级别的autocomplete="off"，给需要清空的单个字段单独加上会更稳妥。

• 监听pageshow事件触发重置
  Chrome恢复标签页时会触发pageshow事件（而不是普通的load事件），我们可以在这个事件里检查页面是否是从缓存恢复的，然后立即重置表单：

  window.addEventListener('pageshow', function(event) {
    // 判断页面是否是从浏览器缓存（恢复标签页/后退）加载的
    if (event.persisted) {
      // 快速重置所有表单
      document.querySelectorAll('form').forEach(form => form.reset());
      
      // 如果需要更彻底（比如处理表单外的输入字段），可以逐个清空
      document.querySelectorAll('input, textarea, select').forEach(field => {
        switch(field.type) {
          case 'checkbox':
          case 'radio':
            field.checked = false;
            break;
          case 'submit':
          case 'button':
            break;
          default:
            field.value = '';
        }
      });
    }
  });
  

  这个方法能精准命中标签页恢复的场景，不会影响正常的页面加载。

• 用sessionStorage做状态标记
  如果你的场景需要更灵活的控制（比如只在特定操作后才重置表单），可以用sessionStorage存一个标记：

  // 页面关闭前标记需要重置表单
  window.addEventListener('beforeunload', function() {
    sessionStorage.setItem('needResetForm', 'true');
  });
  
  // 页面恢复时检查标记并重置
  window.addEventListener('pageshow', function() {
    if (sessionStorage.getItem('needResetForm') === 'true') {
      document.querySelectorAll('form').forEach(form => form.reset());
      // 重置后移除标记，避免下次正常加载也触发
      sessionStorage.removeItem('needResetForm');
    }
  });
  

如果以上方法都没效果，还可以试试加个短暂延迟再重置——因为Chrome可能在页面恢复后有个自动填充的延迟操作，我们晚一步执行重置就能覆盖它：

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    setTimeout(() => {
      document.querySelectorAll('form').forEach(form => form.reset());
    }, 100);
  }
});

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