save text fields to txt file using javascript

Question

I have a form in an html file that looks something like this:

 <td>appKey</td>
                <td><input type="text" id="_appKey" size="40"></td>
            </tr>
            <tr>
                <td>bundleId</td>
                <td><input type="text" id="_bundleId" size="40"></td>
            </tr>
            <tr>
                <td>serverURL</td>
                <td><input type="text" id="_serverURL" size="40"></td>
            </tr>

I will fill out these text areas with information, and I need a function that will allow me to save the info I typed into the fields, to a txt file on my computer (using javascript). Perferbly using a key=value formation (key is the id i gave the field and value is the info i entered into the field)

Any help will be greatly appreciated.

Browsers generally don't have access to the users local filesystem, you probably want a webserver doing this, with the language of your choice etc. — adeneo, Jan 04 '15 at 15:02
My form is set on an app server (glassfish), so I suppose that shouldn't be a problem, if that is what you mean — Jareth, Jan 04 '15 at 15:04
HTML5 provides a "hook" for reading local files, with user confirmation, but not for writing them. Think about it for a minute; if JavaScript could read files silently, or deposit arbitrary files in the local file system, web browsing would suddenly be horribly unsafe. You are going to have to send your text to your server and write it from there. — Bob Brown, Jan 04 '15 at 15:07
Even by allowing the user to do so by using a button? ("save this text to file") - would that be able to surpass this restriction? Also, if I do what you suggest - would I then be able to save the text to my local machine? Appreciate the help, I'm a newbie :) — Jareth, Jan 04 '15 at 15:13
Nope. You showed us HTML markup so I assume that you want to do this in the context of a web browser. Web browser JavaScript is not allowed to write to the local file system for reasons of security. HTML5 provides for persistent storage using `localstorage` and `sessionstorage` but these are isolated from the file system and part of the browser's environment. (Obviously the browser itself is writing them to the local file system, but under conditions controlled only by the browser.) — Bob Brown, Jan 04 '15 at 15:16
possible duplicate of [Is it possible to write data to file using only JavaScript?](http://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript) — Bob Brown, Jan 04 '15 at 15:17
I understand. Thanks for taking the time to explain, I will need to think of a different solution, then. — Jareth, Jan 04 '15 at 15:19
If all you need is persistent storage, look into `localstorage`: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage — Bob Brown, Jan 04 '15 at 15:24

score 0 · Answer 1 · edited May 23 '17 at 12:28

You can use blobs and download a text-file, usually, without any prompt message.

Look at the fiddle: http://jsfiddle.net/xhbhqusz/12/

Javascript is not for this kind of things but modern browsers offer the Blob class which can create a text file for you to download by clicking on anchor tags.

            <tr> <td>appKey</td>
                <td><input type="text" id="_appKey" size="40"></td>
                    <a download="info.txt" class="downloadlink" >Download</a> </p>

            </tr>
            <tr>
                <td>bundleId</td>
                <td><input type="text" id="_bundleId" size="40"></td>
                     <a download="info.txt" class="downloadlink" >Download</a> </p>
            </tr>
            <tr>
                <td>serverURL</td>
                <td><input type="text" id="_serverURL" size="40"></td>
                     <a download="info.txt" class="downloadlink" >Download</a> </p>
            </tr>

And the javascript, with the logic of this stackoverflow answer

(function () {
var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});

    // If we are replacing a previously generated file we need to
    // manually revoke the object URL to avoid memory leaks.
    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }

    textFile = window.URL.createObjectURL(data);

    return textFile;
  };


  var inputFields = document.getElementsByTagName('input');

      for(var i = 0; i < inputFields.length; i++) {
          (function(i){
            inputFields[i].addEventListener('keyup', function () {
                var link = document.getElementsByClassName('downloadlink')[i];
                link.href = makeTextFile(inputFields[i].value);
            });
          })(i);
      }
})();

I wouldn't say always "without any prompt", just _usually_; it depends how their download behaviour is configured — Paul S., Jan 04 '15 at 15:29
@PaulS. Default configuration allows for downloads without prompt messages #chrome — Afonso Matos, Jan 04 '15 at 15:31
@Catgocat, please provide [attribution](http://blog.stackoverflow.com/2009/06/attribution-required/) when you rip code from [another answer](http://stackoverflow.com/a/21016088/464709). Even better, please refrain from plagiarizing code at all. — Frédéric Hamidi, Jan 04 '15 at 15:41

save text fields to txt file using javascript

1 Answers1