如何在表单提交后保留文本（如何在提交后不删除自身？）

Posted 2023-05-07

【中文标题】如何在表单提交后保留文本（如何在提交后不删除自身？）

【英文标题】：How to persist text after a form submit (how to not delete itself after submit?)

【发布时间】：2017-03-08 20:36:18

【问题描述】：

如何在文本框中保存和重新填充文本？每次点击保存，文本输入框中的旧文本都会被移除，不应该被移除。

我想做一个在线编辑器，我需要能够保存当前文本，而不需要在保存后从文本区域框中删除文本。

var types = [
      "extension": ".html", "name": "HTML",
      "extension": ".txt", "name": "Plain Text",
      "extension": ".js", "name": "javascript",
      "extension": ".css", "name": "CSS",
    ];
types.forEach(function(type) 
  $opt = $("<option>").attr("value", type.extension).text(type.name)
  $("#saveas").append($opt)
);

function SaveAsType() 
  console.log($("#saveas").val());

  
    var textToSave = document.getElementById("inputTextToSave").value;
    var textToSaveAsBlob = new Blob([textToSave], 
      type: "text/plain"
    );
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value + "" + $("#saveas").val();

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();
  



function destroyClickedElement(event) 
  document.body.removeChild(event.target);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="inputTextToSave" name="inputTextToSave" rows="10" cols="70" placeholder="Type your text here:"></textarea>
    <br>
    <textarea id="inputFileNameToSaveAs" rows="1" cols="70" placeholder=" Filename Save As " style="resize:none;"></textarea>
    <br>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="jquery.min.js"></script>
    Save as
    <select id="saveas">
      <option value="">Defoult ´´ TXT ´´ file or type your own file type</option>
      <option value=".html">´´ HTML ´´ file</option>
      <option value=".js">´´ JS ´´ file</option>
      <option value=".css">´´ CSS ´´ file</option>
      <option value=".txt">´´ TXT ´´ file</option>
    </select><button onclick="SaveAsType();">Save</button>

【问题讨论】：

cookie ?? HTML5 本地存储 ??

感谢您缩短我的回答。我想我的英语在谈论代码时不是那么好。谢谢...@SWPhantom

谢谢，有趣的是，经过大量尝试寻找答案后，我自己找到了答案。但我会将问题保留在网上，供那些可能有相同问题或问题但不知道如何解决的人使用。愚蠢的解决方案是多么简单，以及我是如何看透它的。 @br3t

【参考方案1】：

这个问题在页面上停留了较长时间后，我自己找到了答案。这实际上是一个非常简单的解决方案。

我刚刚改了：

<button onclick="SaveAsType();">Save</button>

进入

<input type="button" onClick="SaveAsType();" value=" Save ">

WALLAH，现在文本在保存到文本区域后会保留而不被删除。

注意：我会将问题保留在网上，以供可能有相同问题或问题但不知道如何解决的人使用。愚蠢的解决方案是多么简单，而我是如何看待它的。