텍스트 영역에 TXT 파일을 "로드"하고 닫기 또는 URL 변경시 자동 저장하는 방법이 있습니까?

Question

텍스트 영역에 TXT 파일을 "로드"하고 닫기 또는 URL 변경시 자동으로 저장하는 방법이 있습니까?

TXT 파일을 자동으로 열고 페이지를 종료하거나 브라우저를 닫을 때 자동 저장하려면이 기능이 필요합니다.

자바 스크립트 :

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

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

을 때 브라우저를 다루는 경우 : 당신은 매우 쉽게 열 자동을 할 수있는 jQuery를 사용

<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의 unload() 이벤트를 사용할 수 있습니다. 설명서를 보려면 여기를 참조하십시오. https://api.jquery.com/unload/ 언로드 이벤트는 사용자가 페이지에서 이동할 때 트리거됩니다. 따라서 뒤로 및 앞으로 버튼과 링크를 클릭하면 브라우저를 닫을 때 트리거되는 이벤트 외에도이 이벤트가 트리거됩니다.