要构建真正读写本地文件的浏览器端代码编辑器，关键在于使用现代浏览器支持的File System Access API，而非模拟文件系统；该API仅限Chrome、Edge等Chromium内核浏览器，需HTTPS/localhost安全上下文，且必须用户主动触发授权，通过FileSystemFileHandle实现打开、读取、编辑、保存全流程，并支持句柄持久化以记住上次文件，同时为Safari/Firefox提供+下载链接的兼容方案。

要构建一个真正能读写本地文件的浏览器端代码编辑器，关键不是“模拟文件系统”，而是获得对用户真实文件的持续访问权限——这依赖于现代浏览器支持的 File System Access API（注意：它不是旧版已废弃的 `webkitRequestFileSystem`，也不是 HTML5 标准里的“FileSystem API”）。

明确支持范围与前提条件

该 API 目前仅在 Chrome、Edge 及部分新版 Chromium 内核浏览器中可用，且必须满足：

• 运行在安全上下文下（即 HTTPS 或 localhost）
• 用户主动触发（如点击“打开文件”按钮），不能自动调用
• 每次首次访问需显式授权，后续可通过句柄持久化避免重复弹窗

核心流程：打开 → 读取 → 编辑 → 保存

整个操作围绕 FileSystemFileHandle 展开，它代表对单个文件的引用权限：

• 打开文件：调用 showOpenFilePicker()，传入 types 过滤常见源码后缀（如 .js、.py、.html），获取句柄
• 读取内容：用句柄的 getFile().then(file => file.text()) 获取文本内容，直接填入 <textarea></textarea> 或 Monaco/CodeMirror 编辑器
• 保存修改：调用句柄的 createWritable() 得到 FileSystemWritableFileStream，再用 write() 和 close() 写入新内容

提升体验：记住上次打开的文件

用户不希望每次重启页面都重新选文件。可行做法是：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

• 首次授权后，将句柄序列化为字符串（handle.name + handle.kind 不足，需用 self.structuredClone(handle) 或存储其 ID）
• 结合 localStorage 或 IndexedDB 持久化句柄信息（注意：句柄本身不可跨会话复用，但可调用 self.showDirectoryPicker() 或使用 getWellKnownDirectory() 配合名称还原）
• 实际恢复时，需再次调用 showOpenFilePicker({id: storedId})（若支持）或引导用户快速定位同一目录

兼容性兜底与替代方案

面对 Safari、Firefox 等暂不支持该 API 的浏览器，应提供降级路径：

• 仍用 <input type="file"> + FileReader 实现“打开”功能（只读，无保存回原文件能力）
• “另存为”改用 Blob + URL.createObjectURL() 生成下载链接，触发浏览器原生保存对话框
• 编辑状态始终保留在内存中，避免因 API 不可用导致数据丢失

不复杂但容易忽略：真正的本地文件编辑，本质是权限协商 + 句柄管理 + 内容同步，而非单纯渲染和语法高亮。