Редактировать и сохранять файл локально с помощью JS

Question

Я не знаю, возможно ли это, но вот чего я хотел бы достичь. Я хотел бы иметь возможность загружать файл JSON с помощью ввода файла, редактировать его на веб-странице, а затем сохранять изменения - это начальный файл. Я знаю, что по соображениям безопасности браузер не имеет полного доступа к диску, но мне было интересно, есть ли способ разрешить обновления для определенного файла.

В двух словах, поток будет

1. Загрузите файл
2. Редактировать это
3. Сохраните изменения (перезаписи начальный один)

Я не забочусь о совместимость браузера, поэтому, если решение основано на конкретном API-интерфейсе браузера, для меня это достаточно хорошо.

Кроме того, я знаю об атрибуте download, но я стараюсь избегать «нормального» потока загрузки (всплывающее окно или файл, который выбрасывается, это папка «Загрузка»).

Заранее благодарен!

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 на множество элементов key/value.

Это не самый безопасный способ сделать это, но, вероятно, будет хорошо для предпочтений и даже состояния приложения, если вы не возражаете, что существует потенциал для того, чтобы что-то клиентская сторона настраивала значения.

Если пользователь хочет сохранить это, вы вызываете параметр загрузки/сохранения файла.