File System Access 文件选择与保存对话框最佳实践

`title: File System Access 文件选择与保存对话框最佳实践``categories: Web 开发/前端/数据管理``keywords: File System Access API,showOpenFilePicker,showSaveFilePicker,OPFS,编辑``description: 使用文件选择与保存对话框在浏览器端实现本地文件读写，结合 OPFS 与应用内工作流，确保权限与兼容性。`选择与读取async function openText() {

const [h] = await window.showOpenFilePicker({ types: [{ description: 'Text', accept: { 'text/plain': ['.txt'] } }] });

const file = await h.getFile();

return await file.text();

}

保存与写入async function saveText(name, content) {

const h = await window.showSaveFilePicker({ suggestedName: name, types: [{ description: 'Text', accept: { 'text/plain': ['.txt'] } }] });

const w = await h.createWritable();

await w.write(new Blob([content], { type: 'text/plain; charset=utf-8' }));

await w.close();

}

与 OPFS 协作读入后持久化到 OPFS，供离线编辑与索引。