I want to allow my clients to be able to have a save-dialogue e up to save data that I've stored in Javascript. I can't direct them to an existing file because you can't modify the file system directly with Javascript.
Is it possible to send data directly to be saved (of course through a save-dialogue. Otherwise, it would be a crazy exploit). I'm trying to make it so my users can create content on my site and be able to download it.

I want to allow my clients to be able to have a save-dialogue e up to save data that I've stored in Javascript. I can't direct them to an existing file because you can't modify the file system directly with Javascript.
Is it possible to send data directly to be saved (of course through a save-dialogue. Otherwise, it would be a crazy exploit). I'm trying to make it so my users can create content on my site and be able to download it.

• javascript
• save

Share Improve this question Follow edited Aug 29, 2011 at 12:25 JMax 26.6k1212 gold badges7474 silver badges8989 bronze badges asked Aug 29, 2011 at 12:22 FreesnöwFreesnöw 32.2k3131 gold badges9494 silver badges140140 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You could use links with dataUrl to create a save link : (this need you to encode your data using base64)

var a = document.createElement('a');
a.href = "data:text/plain;base64,"+base64_encode("plop");
a.innerHTML = "save";
document.body.appendChild(a);

You can get the base64_encode function at http://phpjs/functions/base64_encode:358 .

Users would need to right click the link and choose "save as..." to save the file on their filesystem.

You could create a save button, and then offer a download dialog. And by allowing users to upload the file again, and parse its contents, you could load your application.

There are several ways of doing that:

Server Side

• Store the serialized form data (or whatever data) in a data base with a unique id, and give the ID to the user, when he wants to load, he'll supply the ID, and you'll whip the data for him.
• Account system, assuming you have an account system, you can link each form data to a specific user.
• Serialize the data in a way, and give it to the user as a downloadable file, then when he wants to recover, he will upload the file, you parse it, and display it for him.

Of course both solutions require an AJAX solution to municate with the server.

Client Side

• If your site is modern (You don't care about old browsers) you can use Local Storage to save his input on his puter, and then automatically load it from his memory when he returns. Note that browser support is not great, you should use Modernizr or something similar to test for it.

What about using server sessions and storing content there based in DialogId and SessionId.

Flows: 1. user stores info. session_id[dialog_id] = 2. user retrieves info. = session_id[dialog_id]

You may use json and base64 to transmit bulk and structural info.

I suppose you want to save the data in a file on the client's puter. You cannot do it directly because JS cannot access the local filesystem. But you can achieve it via the server. You would at the same time send the data to the server and download it to the client. The download opens the usual "Save As..." dialog where the client can specify the file name.

A possible concrete implementation uses a form that makes a POST request to the URL save.php, passing the data to be saved in a hidden input field save_data. The result of the request is directed to an invisible <iframe>.

<form action="save.php" method="post" target="save_target" onsubmit="save();">
    <input type="hidden" id="save_data" name="save_data" value="" />
</form>

<iframe id="save_target" name="save_target" src="#" 
    style="display:none; width:0; height:0; border:0px solid #fff;">
</iframe>

The JS function save() prepares the data to be send:

function save() {
    document.getElementById("save_data").value = ...;       
    return true; // or false if something wrong
};

The PHP page save.php on the server processes the POST request and downloads the data:

$data = $_POST['save_data'];
$size = strlen($data);
$contentType = "text/plain"; // MIME type
$defaultName = "x.txt";

header("Content-Type: $contentType"); 
header("Content-Disposition: attachment; filename=$defaultName"); 
header("Content-Length: $size");    
echo $data;