使用File System Access API时Chrome执行保存操作会刷新页面的问题

问题现象 #

• 基于VS Code的Go Live插件搭建本地服务，开发HTML/JS测试程序验证File System Access API的Save、Save As、Open/Load功能
• 执行Save或Save As操作时，Chrome浏览器会自动刷新页面，导致状态变量state被重置为初始值（如dataA/dataB等回到0），但文件实际已成功保存
• Open/Load读取本地文件时无页面刷新问题
• 复制测试项目文件夹后用Go Live运行，所有功能正常；但将File System Access相关代码移回原项目后，保存操作的页面刷新问题复现

状态变量定义 #

let state = {
    arr: [0],
    dataA: 0,
    dataB: 0,
    dataC: 0,
    fileHandle: null
}

排查与解决思路 #

• 检查触发按钮的默认行为
  如果触发保存的按钮位于<form>标签内，浏览器会默认将其识别为提交按钮，触发表单提交导致页面刷新。给按钮添加type="button"属性，明确阻止默认提交行为：

  <button type="button" onclick="handleSave()">保存</button>
  

• 阻止事件的默认行为与冒泡
  在保存操作的事件处理函数开头，添加代码阻止事件的默认行为和冒泡传播，避免意外触发页面刷新：

  async function handleSave(event) {
    event.preventDefault();
    event.stopPropagation();
    // 后续保存逻辑...
  }
  

• 对比项目结构与代码差异

  • 检查原项目中是否存在全局事件监听代码（如监听submit、click的全局处理函数），这类代码可能干扰File System Access API的执行流程
  • 排查原项目的HTML结构，是否存在未闭合标签、多余的<form>标签等，这些可能导致浏览器误触发页面刷新

• 清理缓存与重启服务
  尝试清除浏览器缓存（Ctrl+Shift+R强制刷新），或重启VS Code的Go Live服务，排除缓存或服务配置差异导致的问题

• 调试事件流
  利用Chrome开发者工具的Sources面板设置断点，跟踪保存操作的执行流程，查看是否有代码主动触发了location.reload()或表单提交；也可通过Event Listeners面板排查页面上绑定的所有事件，定位意外刷新的触发源

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