使用Chrome FileSystem API遇未知错误，求问题排查方案

看起来你遇到的问题主要出在几个现代Chrome FileSystem API的细节遗漏上，我帮你梳理下核心问题并给出修正后的代码：

核心问题分析 #

1. 未请求持久化存储权限
   Chrome中使用PERSISTENT存储模式时，必须先主动向用户请求持久化存储授权，直接调用webkitRequestFileSystem不会自动触发权限弹窗——这就是你看不到权限提示的核心原因。

2. 使用了废弃的BlobBuilder API
   你代码里的BlobBuilder已经被标准Blob构造函数替代多年，旧API在现代Chrome中已不存在，会直接抛出错误，而这个错误的类型不在你原有的DOMError常量匹配逻辑里，所以控制台显示“Unknown Error”。

3. 错误处理逻辑过时
   现代Chrome中，FileSystem API抛出的错误不再使用DOMError.QUOTA_EXCEEDED_ERR这类常量，而是通过错误对象的name属性来标识错误类型（比如QuotaExceededError、SecurityError），原有的匹配逻辑无法识别这些错误，导致显示未知错误。

修正后的完整代码 #

// 统一错误处理函数（适配现代API）
function errorHandler(e) {
    let msg = '';
    switch(e.name) {
        case 'QuotaExceededError':
            msg = '存储配额超出';
            break;
        case 'NotFoundError':
            msg = '文件未找到';
            break;
        case 'SecurityError':
            msg = '安全权限错误';
            break;
        case 'InvalidModificationError':
            msg = '无效修改';
            break;
        case 'InvalidStateError':
            msg = '无效状态';
            break;
        default:
            msg = `未知错误: ${e.message}`;
            break;
    };
    console.log('Error: ' + msg);
}

// 文件系统初始化及写入逻辑
function onInitFs(fs) {
    fs.root.getFile('log-f-api.txt', {create: true}, function(fileEntry) {
        // 创建FileWriter写入文件
        fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function() {
                console.log('写入完成');
            };
            fileWriter.onerror = errorHandler;

            // 使用标准Blob构造函数替代废弃的BlobBuilder
            const ourData = new Blob(['some stuff', 'put some nice text in our file....'], {type: 'text/plain'});
            fileWriter.write(ourData);
        }, errorHandler);
    }, errorHandler);
}

// 启动流程：先请求持久化权限，再初始化文件系统
$(function() {
    document.getElementById('hello').innerHTML = '开始测试';

    // 先请求持久化存储权限（关键步骤！）
    navigator.storage.requestPersistent()
        .then(granted => {
            if (granted) {
                // 权限获取成功，初始化文件系统
                window.webkitRequestFileSystem(window.PERSISTENT, 5*1024*1024, onInitFs, errorHandler);
            } else {
                console.log('用户拒绝了持久化存储权限');
            }
        })
        .catch(errorHandler);
});

关键改动说明 #

• 新增权限请求步骤：通过navigator.storage.requestPersistent()主动触发权限弹窗，用户授权后才能使用PERSISTENT存储。
• 替换BlobBuilder为标准Blob：用new Blob()构造要写入的数据，符合现代浏览器标准。
• 更新错误处理逻辑：通过错误对象的name属性判断错误类型，适配Chrome当前的API规范。

验证注意事项 #

• 确保在localhost或HTTPS环境下运行（Chrome禁止非安全环境使用FileSystem API）；
• 运行代码后，Chrome会弹出“允许网站在您的设备上存储持久数据吗？”的权限弹窗，授权后即可正常创建并写入文件。

内容的提问来源于stack exchange，提问作者little tiny man