现代浏览器不支持直接通过 `navigator.permissions.query({ name: 'file-system' })` 获取“文件编辑”权限——该权限并不存在于标准 web api 中；实际应使用 file api 读取用户主动选择的文件，配合 `showsavefilepicker()` 等新 api 实现有限的读写操作。
在 Web 开发中，浏览器出于安全考虑，严格限制网页对本地文件系统的直接访问权限。你无法像桌面应用那样申请全局“文件编辑”权限（例如 file-system 并非标准权限名，navigator.permissions.query({ name: 'file-system' }) 会抛出错误或返回 undefined）。但现代浏览器（Chrome 86+、Edge 86+、Firefox 117+ 支持部分功能）已逐步引入 Web File System Access API，允许用户授权网页读取、写入单个文件或目录——前提是用户主动触发（如点击按钮），且全程需用户显式确认。
✅ 正确做法：基于用户交互的文件读写
1. 读取文件（无需特殊权限，推荐入门）
使用 + FileReader 是最兼容、最安全的方式：
<input type="file" id="fileInput"> <button onclick="readFile()">读取文件</button> <pre class="brush:php;toolbar:false;" id="output"><script> async function readFile() { const input = document.getElementById('fileInput'); const file = input.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (e) => { document.getElementById('output').textContent = e.target.result.slice(0, 500) + '...'; }; reader.onerror = () => console.error('读取失败'); reader.readAsText(file); // 或 readAsArrayBuffer(), readAsDataURL() } </script>
✅ 优势：零权限请求、全浏览器支持（包括 Safari）、无需 HTTPS（开发时 localhost 也可用）。
2. 写入/编辑文件（需用户授权，仅 Chromium/Edge 稳定支持）
使用 showOpenFilePicker() 和 showSaveFilePicker() 实现真正的“编辑后保存”：
<button onclick="editAndSave()">编辑并保存文件</button>
<script>
async function editAndSave() {
try {
// ① 用户选择一个已有文件（只读打开）
const [fileHandle] = await window.showOpenFilePicker({
types: [{ description: '文本文件', accept: { 'text/plain': ['.txt'] } }]
});
// ② 获取可读流（读取原始内容）
const file = await fileHandle.getFile();
const content = await file.text();
// ③ 在内存中编辑（例如添加时间戳）
const editedContent = `[Edited ${new Date().toISOString()}]\n${content}`;
// ④ 用户确认保存位置（可能为原文件，也可能另存）
const newHandle = await window.showSaveFilePicker({
suggestedName: file.name.replace('.txt', '-edited.txt'),
types: [{ description: '文本文件', accept: { 'text/plain': ['.txt'] } }]
});
// ⑤ 写入新文件
const writable = await newHandle.createWritable();
await writable.write(editedContent);
await writable.close();
alert('✅ 文件已保存！');
} catch (err) {
console.warn('操作被用户取消或不支持：', err.name);
// 常见错误：AbortError（用户取消）、SecurityError（非安全上下文）、NotSupported（API 不可用）
}
}
</script>⚠️ 注意事项：
- 必须运行在 HTTPS 或 localhost 环境下；
- 用户必须主动点击触发（不能自动调用）；
- 首次调用 show*FilePicker() 会弹出系统级文件对话框，用户需手动选择；
- file-system 权限名无效，不要尝试 navigator.permissions.query({ name: 'file-system' })；
- 替代方案：如需更复杂操作（如目录遍历），可结合 showDirectoryPicker()（需用户授予整个文件夹权限）。
3. 其他常见权限的正确查询方式
虽然“文件编辑”不是标准权限，但你可以合法查询以下权限：
// 示例：检查通知、地理位置、摄像头等
const perms = ['notifications', 'geolocation', 'camera', 'microphone'];
for (const name of perms) {
try {
const status = await navigator.permissions.query({ name });
console.log(`${name}: ${status.state}`); // 'granted', 'denied', 'prompt'
} catch (e) {
console.log(`${name} 不受支持或不可查询`);
}
}? 总结：Web 的核心原则是 最小权限 + 用户主导。永远不要假设权限存在，而应通过 try/catch 处理拒绝，并优雅降级（例如：若 showSaveFilePicker 不可用，则改用 download 属性触发下载）。
最终建议：从 FileReader 读取开始实践，再渐进升级到 File System Access API。所有操作都应以提升用户体验为目标，而非绕过浏览器安全模型。
