Why does this filesystem api requestQuota call fail?

I'm writing an HTML5 app to run in Chrome but it will be on the local filesystem (so they'll start it by double-clicking an html file). It is throwing an error when I try to access the filesystem and I think it's because it's a local file. Is there a way to make Chrome allow this?

(NOTE: I do get the popup asking me to allow the app to store permanantly and I click "OK". It still throws this error)

The below code throws the error:

DOMException {message: "NotSupportedError: DOM Exception 9", name: "NotSupportedError", code: 9, INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2…}

filetest.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script>
        //File System handler
        window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

        function onInitFs(fs) {
            console.log('Opened file system: ' + fs.name);
        }

        function errorHandler(e) {
            var msg = '';

            switch (e.code) {
            case FileError.QUOTA_EXCEEDED_ERR:
                msg = 'QUOTA_EXCEEDED_ERR';
                break;
            case FileError.NOT_FOUND_ERR:
                msg = 'NOT_FOUND_ERR';
                break;
            case FileError.SECURITY_ERR:
                msg = 'SECURITY_ERR';
                break;
            case FileError.INVALID_MODIFICATION_ERR:
                msg = 'INVALID_MODIFICATION_ERR';
                break;
            case FileError.INVALID_STATE_ERR:
                msg = 'INVALID_STATE_ERR';
                break;
            default:
                msg = 'Unknown Error';
                break;
            };

            console.log('Error: ' + msg);
        }

        /** THIS CAUSES IT TO THROW AN ERROR */
        window.webkitStorageInfo.requestQuota(window.PERSISTENT, 5*1024*1024, function(grantedBytes) {
                window.requestFileSystem(window.PERSISTENT, grantedBytes, onInitFs, errorHandler);
        }, function(e) {
            console.log('Error', e);
        });
        </script>
    </body>
</html>

If I instead change it to ask for temporary storage, it still throws an error, but now it's a SECURITY_ERR:

window.requestFileSystem(window.TEMPORARY, 5*1024*1024, onInitFs, errorHandler);

Not sure this is the best answer but it appears to be a security restriction on local files. Starting Chrome as below fixes the issue:

google-chrome --allow-file-access-from-files

That will allow creating persistent storage.

Andrew Willems

If your app requires the user to double-click on an html file, then your answer might be the only way to go. However, if the need is to access a local file, but you have some flexibility in terms of how to access that local file, then consider creating a small local server.

On Windows, install http-server (npm install -g http-server) and run http-server from your project directory. On Mac/Linux, run python -m SimpleHttpServer from your local directory. In the browser, access the locally hosted web site. On Windows I had to use localhost:8080 while on the Mac I had to use localhost:8000.

All credit for this answer goes to @orszaczky who gave this answer to another SO question. That answer also discusses why this is a security issue, and why using the --allow-file-access-from-files flag is potentially dangerous.

By the way, this is not only an issue for Chrome (v49.0) but also for Opera (v35.0), on both Windows and Mac.

来源：https://stackoverflow.com/questions/16487803/why-does-this-filesystem-api-requestquota-call-fail

标签

javascript

html5

google-chrome

html5-filesystem