Javascript 有没有一种方法可以；“满负荷”；在textarea中打开一个TXT文件并在关闭或URL更改时自动保存？

是否有一种方法可以“onload”在textarea中打开一个TXT文件，并在关闭或URL更改时自动保存

我需要这个自动打开一个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 **/

<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 ">

/**重新加载文件开始**/
函数重载文件（）
{
var FileToLoad=document.getElementById（“FileToLoad”）.files[0]；
var fileReader=newfilereader（）；
fileReader.onload=函数（fileLoadedEvent）
{
var textFromFileLoaded=fileloadevent.target.result；
document.getElementById（“text”）.value=textFromFileLoaded；
};
readAsText（FileToLoad，“UTF-8”）；
}
/**重新加载文件结束**/
/**将文件另存为FUNC p-1开始**/
变量类型=[
{“extension”：.html”，“name”：“html”}，
{“扩展名”：.txt”，“名称”：“纯文本”}，
{“extension”：.js”，“name”：“Javascript”}，
{“extension”：.css”，“name”：“css”}，
]
type.forEach（函数（类型）{
$opt=$（“”）.attr（“值”，type.extension）.text（type.name）
$（“#另存为”）.append（$opt）
})
/**如果开始为空，则保存返回**/
函数SaveAsType（）
{
if（document.getElementById（“FileNameToSaveAs”）.value==“”）{
警报（“`Filename另存为``名称为空。\n请在保存之前为文件指定一个名称，以便保存它。”）；
返回false；
}否则{
/**将文件另存为FUNC p-2开始**/
{
console.log（$（“#saveas”）.val（））
{
var textToSave=document.getElementById（“text”）.value；
var textToSaveAsBlob=新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=“下载文件”；
downloadLink.href=textToSaveAsURL；
downloadLink.onclick=destroyClickedElement；
downloadLink.style.display=“无”；
document.body.appendChild（下载链接）；
downloadLink.click（）；
}
}
/**将文件另存为FUNC p-2结束**/
}
}
/**空结束时保存返回**/
/**将文件另存为FUNC p-1结束**/
函数销毁ClickedElement（事件）
{
document.body.removeChild（event.target）；
}
/**将文件另存为结尾**/

HTML:

/** 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 **/

<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 ">

---

使用jquery，您可以非常轻松地完成自动打开：

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

为了处理浏览器何时关闭，您可以使用jquery的unload（）事件。有关文档，请参见此处： 请注意，当用户离开页面时会触发卸载事件。因此，除了在浏览器关闭时触发此事件外，后退和前进按钮以及单击链接也将触发此事件