How can one download the contents of an HTML5 web database to the client?

Question

I am looking for a way to save the contents of an HTML5 web database to a local file for persistence and for loading back into the web application. I'm using Firefox 3.6.8 with the HTML5 features to use a local web database. I can upload a file and read it's contents but am unable to find an elegant way to save the contents of the database to the file system. Any ideas?

I believe there is something written in flash that can do this. I would consider this but I would prefer a straight HTML 5 version instead.

Answer 1

You can't do this with plain HTML 5, as it doesn't have any mechanism to deal with local files (that would imply a security risk anyway). You'll at least need some JavaScript or Flash to store data locally.

But you can't access the local filesystem using JavaScript. You can only use cookies or the localStorage capabilities of a browser.

Nor can you do this using Flash. Both system work the same: they store information in a place specified by the browser/Flash. Moreover, in both cases space is limited (the limit varies between platforms and even individual settings).

The only way to do this is to post the data to the server, e.g., using a hidden form, and let the server respond with header Content-Disposition: attachment and sending the file back to the client. For example:

<form action="doLoopback.php" method="POST" name="theForm">
  <input type="hidden" id="data-container" name="data">
</form>
<span id="trigger">→ Click here! ←</span>
<script>
var theData = '123, 2334, "Fé℗⇒oo"';

function sendData() {
    document.getElementById('data-container').value = theData;
    document.theForm.submit();
}

window.onload = function () {
    var el = document.getElementById('trigger');
    el.onclick = sendData;
};
</script>

and using PHP the response file reads:

<?php
    if (isset($_POST['data'])) {
        header('Content-Disposition: attachment; filename=foo.csv');
        header('Content-Type: application/octet-stream');
        echo $_POST['data'];
    }
?>