提问者:小点点

Javascript API/文件处理的简单方式?


null

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>

null

我有这个。。。它的复制品大多是。。。它将输入保存在一个文件中。

我想将输入保存在本地的一个文件中。因此,例如,它可以再次加载,这样一个人就不必重新输入他的详细信息。。。

据我所知,关键字是“API”和“文件处理”,但我很不清楚如何做和在哪里查找,我找到的一切似乎都不是正确的解决方案。。。有什么简单的方法可以做到吗?


共1个答案

匿名用户

浏览器不提供允许将数据直接保存到本地文件的API。

你的选择是:

  • 生成一个下载,浏览器将该下载视为任何其他下载(通常将其保存到名为Downloads的文件夹中)。(可以使用FileReader API回读。)
  • 索引DB(浏览器的本地)。
  • Web存储(浏览器的本地存储)。
  • cookies(存储在浏览器本地,但随每个HTTP请求发送到服务器,并且对数据格式和大小有严格限制)。
  • 使用web服务(例如通过Fetch)在服务器上存储数据。