有没有办法 "onload" 在 textarea 中打开 TXT 文件并在关闭或 URL 更改时自动保存？

Question

我需要这个来自动打开 TXT 文件并在退出页面或关闭浏览器时自动保存它。

JavaScript:

/** ReLoad File BEGINS**/
function ReLoadFile()
{
    var FileToLoad = document.getElementById("FileToLoad").files[0];
    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) 
    {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        document.getElementById("text").value = textFromFileLoaded;
    };
    fileReader.readAsText(FileToLoad, "UTF-8");
}
/** ReLoad File ENDS**/

/** Save File As FUNC p-1 BEGINS **/
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)
})

/** Save return if empty BEGINS**/
function SaveAsType()
{
    if (document.getElementById("FileNameToSaveAs").value == "") {
         alert("``Filename Save As`` name is empty.\n       Please give the file a name that you will save it as, before you save it.");
         return false;
    } else {
/** Save File As FUNC p-2 BEGINS **/
    {
    console.log($("#saveas").val())

        {
        var textToSave = document.getElementById("text").value;
        var textToSaveAsBlob = new Blob([textToSave],     {type:"text/plain"    });
        var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
        var fileNameToSaveAs = document.getElementById("FileNameToSaveAs").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();
        }

    }
/** Save File As FUNC p-2 ENDS **/
    }
}
/** Save return if empty ENDS**/
/** Save File As FUNC p-1 ENDS **/

function destroyClickedElement(event)
{
    document.body.removeChild(event.target);
}
/** Save File As ENDS **/

HTML:

<input type="file" id="FileToLoad" name="fileLoadName">
<input type="button" onclick="ReLoadFile();" value=" Re-Load ">
<textarea name="text" id="text" rows="34" cols="134" wrap="soft" placeholder="STEP - 1 : Put or load your web page Source Codes here"></textarea>
<textarea id="FileNameToSaveAs" rows="1" cols="30" maxlength="40"  placeholder=" Filename Save As "></textarea>
<input type="button" onClick="SaveAsType();" value=" Save ">

Answer 1

使用jquery你可以很容易地自动打开:

$(document).ready(function() {
       // do what you want with the text file
});

要处理浏览器何时关闭，您可以使用 jquery 的 unload() 事件。请在此处查看文档：https://api.jquery.com/unload/ 请注意，当用户离开页面时会触发 unload 事件。因此，除了在浏览器关闭时触发外，后退和前进按钮以及单击 link 也会触发此事件。

有没有办法 "onload" 在 textarea 中打开 TXT 文件并在关闭或 URL 更改时自动保存？

Is there a way to "onload" open a TXT file in textarea and automatically save it on close or URL change?

html

javascript

jquery

autosave

onload