Javascript API / filehandling in a simple way for an amateur?

Question

function sende(){

    var host = document.getElementById("Host").value;
    var name =  document.getElementById("ID").value;
    var pw   = document.getElementById("PW").value;
    var at = document.getElementById("AT").value;
    var sub = document.getElementById("Subject").value;
    var mess = document.getElementById("Message").value;


    Email.send({
        Host : host,
        Username : name,
        Password : pw,
        To : at,
        From : name,
        Subject : sub,
        Body : mess
    });
    
    
    
    var blob = new Blob([host," ",name," ",pw], { type: "text/plain;charset=utf-8" });
    saveAs(blob, "Emaildaten.txt");
    
    
    
    
    if (mess!="")
    {
    alert("Email has been sent to " +at);
    document.getElementById("AT").value = "";
    document.getElementById("Subject").value = "";
    document.getElementById("Message").value = "";
    }
    
    
}



function gib(){
console.log(document.getElementById("PW").value);
}




(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define([], factory);
  } else if (typeof exports !== "undefined") {
    factory();
  } else {
    var mod = {
      exports: {}
    };
    factory();
    global.FileSaver = mod.exports;
  }
})(this, function () {
  "use strict";

  /*
  * FileSaver.js
  * A saveAs() FileSaver implementation.
  *
  * By Eli Grey, http://eligrey.com
  *
  * License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
  * source  : http://purl.eligrey.com/github/FileSaver.js
  */
  // The one and only way of getting global scope in all environments
  // https://stackoverflow.com/q/3277182/1008999
  var _global = typeof window === 'object' && window.window === window ? window : typeof self === 'object' && self.self === self ? self : typeof global === 'object' && global.global === global ? global : void 0;

  function bom(blob, opts) {
    if (typeof opts === 'undefined') opts = {
      autoBom: false
    };else if (typeof opts !== 'object') {
      console.warn('Deprecated: Expected third argument to be a object');
      opts = {
        autoBom: !opts
      };
    } // prepend BOM for UTF-8 XML and text/* types (including HTML)
    // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF

    if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
      return new Blob([String.fromCharCode(0xFEFF), blob], {
        type: blob.type
      });
    }

    return blob;
  }

  function download(url, name, opts) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = 'blob';

    xhr.onload = function () {
      saveAs(xhr.response, name, opts);
    };

    xhr.onerror = function () {
      console.error('could not download file');
    };

    xhr.send();
  }

  function corsEnabled(url) {
    var xhr = new XMLHttpRequest(); // use sync to avoid popup blocker

    xhr.open('HEAD', url, false);

    try {
      xhr.send();
    } catch (e) {}

    return xhr.status >= 200 && xhr.status <= 299;
  } // `a.click()` doesn't work for all browsers (#465)


  function click(node) {
    try {
      node.dispatchEvent(new MouseEvent('click'));
    } catch (e) {
      var evt = document.createEvent('MouseEvents');
      evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
      node.dispatchEvent(evt);
    }
  } // Detect WebView inside a native macOS app by ruling out all browsers
  // We just need to check for 'Safari' because all other browsers (besides Firefox) include that too
  // https://www.whatismybrowser.com/guides/the-latest-user-agent/macos


  var isMacOSWebView = /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent);
  var saveAs = _global.saveAs || ( // probably in some web worker
  typeof window !== 'object' || window !== _global ? function saveAs() {}
  /* noop */
  // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView
  : 'download' in HTMLAnchorElement.prototype && !isMacOSWebView ? function saveAs(blob, name, opts) {
    var URL = _global.URL || _global.webkitURL;
    var a = document.createElement('a');
    name = name || blob.name || 'download';
    a.download = name;
    a.rel = 'noopener'; // tabnabbing
    // TODO: detect chrome extensions & packaged apps
    // a.target = '_blank'

    if (typeof blob === 'string') {
      // Support regular links
      a.href = blob;

      if (a.origin !== location.origin) {
        corsEnabled(a.href) ? download(blob, name, opts) : click(a, a.target = '_blank');
      } else {
        click(a);
      }
    } else {
      // Support blobs
      a.href = URL.createObjectURL(blob);
      setTimeout(function () {
        URL.revokeObjectURL(a.href);
      }, 4E4); // 40s

      setTimeout(function () {
        click(a);
      }, 0);
    }
  } // Use msSaveOrOpenBlob as a second approach
  : 'msSaveOrOpenBlob' in navigator ? function saveAs(blob, name, opts) {
    name = name || blob.name || 'download';

    if (typeof blob === 'string') {
      if (corsEnabled(blob)) {
        download(blob, name, opts);
      } else {
        var a = document.createElement('a');
        a.href = blob;
        a.target = '_blank';
        setTimeout(function () {
          click(a);
        });
      }
    } else {
      navigator.msSaveOrOpenBlob(bom(blob, opts), name);
    }
  } // Fallback to using FileReader and a popup
  : function saveAs(blob, name, opts, popup) {
    // Open a popup immediately do go around popup blocker
    // Mostly only available on user interaction and the fileReader is async so...
    popup = popup || open('', '_blank');

    if (popup) {
      popup.document.title = popup.document.body.innerText = 'downloading...';
    }

    if (typeof blob === 'string') return download(blob, name, opts);
    var force = blob.type === 'application/octet-stream';

    var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari;

    var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);

    if ((isChromeIOS || force && isSafari || isMacOSWebView) && typeof FileReader !== 'undefined') {
      // Safari doesn't allow downloading of blob URLs
      var reader = new FileReader();

      reader.onloadend = function () {
        var url = reader.result;
        url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;');
        if (popup) popup.location.href = url;else location = url;
        popup = null; // reverse-tabnabbing #460
      };

      reader.readAsDataURL(blob);
    } else {
      var URL = _global.URL || _global.webkitURL;
      var url = URL.createObjectURL(blob);
      if (popup) popup.location = url;else location.href = url;
      popup = null; // reverse-tabnabbing #460

      setTimeout(function () {
        URL.revokeObjectURL(url);
      }, 4E4); // 40s
    }
  });
  _global.saveAs = saveAs.saveAs = saveAs;

  if (typeof module !== 'undefined') {
    module.exports = saveAs;
  }
});

#UmAlles {
width: 490px;
height: 185px;
border: 5px solid black;
margin: 20px  auto;

}


#containMess {
width: 300px;
height: 160px;
position: relative;
left: 190;
top: 2;
}

#mess {
margin: 3px;
background-color:black;
color: white;
}


#MailContainer {
height: 168px;
width: 190px;
background-color: black;
position: relative;
bottom: 163;
}



table {
align-content: center;
width: 100%;
height: 100%;

}

td {
max-width: 50%;
min-width: 30%;
align-content: center;
}


tr {
align-content: center;
}


.boxxes {
width: 98%;
height: 90%;
background-color:black;
display: block;
margin: 3px;
position: relative;
right: 0;
color: white;
}


#Message {
background-color:black;
color: white;
}




html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #000;
}

.glow-on-hover {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    bottom: 220px;
    left: 230px;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

<html lang="en">
<head>
<title> Mailer </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://smtpjs.com/v3/smtp.js"></script>
</head>

<body>


<div id="UmAlles">
<div id="containMess"><textarea id="Message"placeholder="Email-Inhalt" cols="35" rows="4"></textarea></div>
<div id="MailContainer">
<table style="width:100%">
<tr>
<td><input type="text" id="Host"placeholder="Host-Server"class="boxxes"></td>
</tr>
<tr>

<td><input type="text" id="ID"placeholder="Versender-Email"class="boxxes"></td>
</tr>
<tr>

<td><input type="password" id="PW"placeholder="Passwort"class="boxxes"></td>
</tr>
<tr>

<td><input type="text" id="AT"placeholder="Empfänger"class="boxxes"></td>
</tr>
<tr>

<td><input type="text" id="Subject"placeholder="Betreff"class="boxxes"></td>
</tr>
</table>
</div>


<button class="glow-on-hover" type="button"onClick="sende()">Send Email</button>


</div>


</body>
</html>

I have this... its copied pastes mostly... It saves the input in a file.

I want to save the input in a file locally. So for example it can be loaded again so one doesnt have to re-enter his details...

From what I understand, keywords are "API" and "file-handling" but I'm very clueless how to do it and where to look, everything I find doesnt seem to be the right solution... Is there an easy way to do that?

Web pages have very limited access to the local filesystem. You could use [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Storage) instead. — Teemu, Sep 10 '20 at 15:08
If it's a web application, you might have problems saving the file to the drive due to security issues. Depending on the size of the data, you might be able to store it in a cookie. — Konrad Viltersten, Sep 10 '20 at 15:08

score 0 · Accepted Answer · answered Sep 10 '20 at 15:10

Browsers provide no APIs that allow data to be saved directly to local files.

Your alternatives are:

Generate a download which the browser will treat as any other download (typically saving it to a folder named Downloads). (You can read it back using the FileReader API.)
IndexDB (local to the browser).
Web Storage (local to the browser).
Cookies (stored local to the browser, but sent with every HTTP request to the server, and with heavy constraints on the data format and size).
Using a web service (e.g. via Fetch) to store the data on a server.

thanks!!!...but with nodejs its different no? – Lisa Sep 14 '20 at 10:37 — Lisa, Sep 14 '20 at 10:37

Javascript API / filehandling in a simple way for an amateur?

1 Answers1