How to write and read a persistent file created via Javascripts Filesystem API?

Question

How do you losslessly write and read a JSON file to the local filesystem using the Javascript Filesystem API?

Here's my code to download a large JSON file via Ajax, write it to a local file, and then reload it:

var requestedBytes = 1024*1024*100; // MB
var persistent_fn = 'data.json';
var data = null;

function write_file(fs){
    fs.root.getFile(persistent_fn, {create: true}, function(fileEntry) {
        fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
                console.log('write finished')
                read_file(fs);
            };
            fileWriter.onerror = function(e) {
                console.log('write error:', e)
            };
            var blob = new Blob([JSON.stringify(data)], {type: 'application/json'});
            console.log('writing')
            fileWriter.write(blob);
        }, function(){ console.log('error getting writer' ) });
    }, function(){ console.log('error getting file') });
}

function read_file(fs){
    fs.root.getFile(persistent_fn, {create: true}, function(fileEntry){
        fileEntry.file(
            function(file){
                let reader = new FileReader();
                reader.onload = function() {
                    console.log('read success, parsing json')
                    var data = JSON.parse(reader.result);
                    var cnt = Object.keys(data).length;
                    console.log('count:'+cnt);
                };
                reader.onerror = function() {
                    console.log('unable to read:', reader.error)
                };
                reader.addEventListener('progress', function(e) {
                    if(e.lengthComputable == true) {
                        var percent_read = Math.floor((e.loaded/e.total)*100);
                        console.log(percent_read + '% read');
                    }
                });
                reader.readAsText(file);
            }, function(){ console.log('unable to access file'); });
    });
}

navigator.webkitPersistentStorage.requestQuota(
    requestedBytes,
    function(grantedBytes){
        console.log('quota granted');
        console.log('requesting filesystem access');
        window.requestFileSystem(
            PERSISTENT,
            grantedBytes,
            function(fs){
                console.log('filesystem request granted, name='+fs.name+' root='+fs.root)
                $.getJSON('result.json', function(jd){
                    data = jd;
                    write_file(fs);
                });
            },
            function(e){
                console.log('filesystem request failed', e)
            });
    },
    function(e){
        console.log('Request quota failed', e);
    }
);

However, it doesn't work. The line:

var data = JSON.parse(reader.result);

fails with the error:

Uncaught SyntaxError: Unexpected end of JSON input

What's causing this? Presumably, I'm either not writing the file correctly, or there's some size limitation that's causing the file write to be truncated.

Is there any way to inspect the stored file? Where is it stored on a Linux system? This post claims file's stored in directory that doesn't exist. This post claims files are stored inside a SQLite database, but I'm not able to verify this.