使用JS在本地編輯和保存文件

Question

我不知道是否有可能，但這是我想要實現的目標。 我希望能夠使用文件輸入來加載JSON文件，在網頁中對其進行編輯，然后將更改保存為初始文件。 我知道出於安全原因，瀏覽器無法完全訪問磁盤，但是我想知道是否存在一種允許對特定文件進行更新的方法。

簡而言之，流程將是

1. 載入檔案
2. 編輯它
3. 保存更改（重寫初始更改）

我不在乎瀏覽器的兼容性，因此，如果該解決方案基於特定瀏覽器的API，對我來說就足夠了。

另外，我知道download屬性，但是我試圖避免“正常”下載流程（彈出窗口或拋出的文件是Downloads文件夾）。

提前致謝 ！

Answer 1

 var input = document.querySelector("input[type=file]"); var text = document.querySelector("textarea"); var button = document.querySelector("input[type=button]"); var name; input.onchange = function(e) { var reader = new FileReader(); reader.onload = function(event) { text.value = event.target.result; button.disabled = false; } name = e.target.files[0].name; reader.readAsText(new Blob([e.target.files[0]], { "type": "application/json" })); } button.onclick = function(e) { e.preventDefault(); var blob = new Blob([text.value], { "type": "application/json" }); var a = document.createElement("a"); a.download = name; a.href = URL.createObjectURL(blob); document.body.appendChild(a); a.click(); text.value = ""; input.value = ""; button.disabled = true; document.body.removeChild(a); } 

 textarea { white-space: pre; width: 400px; height: 300px; } 

 <form> <input type="file" /> <br /> <textarea></textarea> <br /> <input type="button" disabled="true" value="Save" /> </form> 

Answer 2

考慮研究FileSystem 。 目前僅在Chrome瀏覽器中，其他瀏覽器可能不支持。

Answer 3

語言環境存儲？ 存儲將持續存在的鍵值對-跨瀏覽器的局限性，但是Chrome，Firefox，Safari，Opera，IE支持該基本概念。 事物存儲為字符串，因此您可以將json類型信息存儲為值，而不是將json分解為許多鍵/值項。

這不是最安全的方法，但是對於首選項甚至應用程序狀態，如果您不介意客戶端有可能調整值，則可能會很好。

如果用戶要保存此文件，則可以調用“下載/保存文件”選項。