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

Question

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

I need this to auto open a TXT file and auto save it when exiting the page or when closing the browser.

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

using jquery you can do the auto open very easily:

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

For dealing with when the browser closes you might be able to make use of jquery's unload() event. See here for documentation: https://api.jquery.com/unload/ Note that the unload event gets triggered when the user moves away from the page. Therefore, the back and forward buttons, as well as clicking on a link will trigger this event in addition to it being triggered when the browser is closed.