FileSystemHandle API是Web Platform API的一部分，仅在Chromium系浏览器的安全上下文中支持，用于实现浏览器端本地文件的读写；需通过showOpenFilePicker获取FileSystemFileHandle，再用getFile().text()读取、createWritable()写入，并可持久化句柄ID以提升用户体验。
注意：FileSystemHandle API 目前（截至2024年）仅在 Chrome/Edge 等基于 Chromium 的浏览器中受支持，且必须运行在安全上下文（HTTPS 或 localhost）下。它不属于 HTML5 标准，而是 Web Platform API（File System Access API） 的一部分，常被误称为“HTML5 FileSystem API”，但和已废弃的旧版 webkitRequestFileSystem 完全不同。
要实现一个基于浏览器、可读写本地文件的轻量代码编辑器（如类似 VS Code 的单文件编辑体验），核心是用 FileSystemHandle（尤其是 FileSystemFileHandle）获取对用户选定文件的持久访问权限，并配合 <textarea> 或 CodeMirror/monaco-editor 渲染与编辑。
以下是关键步骤与实用实现要点：
1. 请求并获取文件句柄（打开/保存文件）
用户首次操作需显式授权——调用 showOpenFilePicker 或 showSaveFilePicker，返回一个 FileSystemFileHandle：
立即学习“前端免费学习笔记（深入）”；
// 打开已有文件
async function openFile() {
try {
const [handle] = await window.showOpenFilePicker({
types: [{
description: 'Source Code',
accept: {
'text/plain': ['.txt', '.js', '.ts', '.html', '.css', '.json'],
'text/x-python': ['.py'],
}
}],
excludeAcceptAllOption: true
});
return handle; // FileSystemFileHandle 实例
} catch (err) {
console.warn('用户取消或拒绝访问', err);
}
}
// 新建/另存为文件
async function saveAsFile() {
const handle = await window.showSaveFilePicker({
suggestedName: 'untitled.js',
types: [{
description: 'JavaScript',
accept: { 'text/javascript': ['.js'] }
}]
});
return handle;
}2. 读取文件内容并渲染到编辑器
拿到 FileSystemFileHandle 后，调用 getFile() 得到 Blob，再用 text() 读取为字符串：
async function loadFileContent(handle) {
if (!handle) return '';
try {
const file = await handle.getFile();
const content = await file.text(); // 自动按 BOM 或 UTF-8 解码
return content;
} catch (err) {
alert('读取文件失败：' + err.message);
throw err;
}
}
// 示例：加载后填入 textarea
async function initEditor() {
const handle = await openFile();
if (!handle) return;
const content = await loadFileContent(handle);
document.getElementById('editor').value = content;
// 保存 handle 到全局或组件状态，供后续保存使用
window.currentFileHandle = handle;
}3. 将编辑后的内容写回文件
调用 createWritable() 获取可写流，写入字符串（需转为 Uint8Array）：
async function saveFileContent(handle, content) {
if (!handle) throw new Error('无有效文件句柄');
try {
const writable = await handle.createWritable();
await writable.write(new TextEncoder().encode(content));
await writable.close();
} catch (err) {
alert('保存失败：' + err.message);
throw err;
}
}
// 绑定到保存按钮
document.getElementById('save-btn').addEventListener('click', async () => {
const editor = document.getElementById('editor');
await saveFileContent(window.currentFileHandle, editor.value);
});4. 持久化句柄（可选但推荐）
用户刷新页面后，句柄会失效。可通过 PermissionStatus.state 和 localStorage 配合实现“记住最近文件”（需用户已授予权限）：
// 保存句柄 ID（仅用于恢复提示，不能直接复用）
async function rememberFile(handle) {
const permissions = await handle.queryPermission({ mode: 'readwrite' });
if (permissions === 'granted') {
localStorage.setItem('lastFileId', handle.name);
// 实际项目中建议结合 IndexedDB 存储更可靠元数据
}
}
// 刷新后尝试恢复（需用户再次点击“打开”才真正恢复权限）
async function restoreLastFile() {
const name = localStorage.getItem('lastFileId');
if (name) {
// 提示用户：“继续编辑上次的文件？” → 触发 openFile() 并预选该文件（需 UX 配合）
}
}补充说明
不支持目录批量操作：当前 API 不提供递归遍历或监听文件变化（无 watch()）。如需项目级编辑器，需搭配 showDirectoryPicker()（Chrome 86+）并自行管理文件树。
编辑器增强建议：
- 用 CodeMirror 6 替代原生
textarea，支持语法高亮、缩进、查找替换 - 监听
input事件做自动保存（debounced）、修改状态标记（*号） - 处理大文件时用
stream()+TextDecoderStream流式读取，避免内存溢出 - 错误边界兜底：文件被外部程序占用时，
createWritable()会抛NotAllowedError或InvalidStateError
这不是一个“开箱即用”的富编辑器框架，而是一套安全、可控的本地文件交互基座。真实产品（如 StackBlitz、CodeSandbox）会在此之上叠加编译、沙箱、协作等能力，但核心读写逻辑一致。
