У меня 5 текстовых полей, в которых лежат некие значения.
Как реализовать экспорт и импорт в файл? Т.е суть в том, чтобы все введенные значения ушли в файл, и позже их можно было открыть.
Поиск в Google не дал результатов, ибо решения я нашел только на PHP.
File System API - не стандартизированное и не утверждённое W3C API, которой будет работать только в браузерах на движке Blink. Этот вариант подойдёт Вам только в том случае, если Вы пишите дополнение для Chrome или веб-аппликацию под конкретный браузер.
Если нет, то используйте стандартизированный FileReader API, который работает почти на всех современных браузерах.
Пример записи и чтения файла (или нескольких):
HTML:
<input id="input" type="file">
<hr>
<textarea id="textarea"></textarea>
<hr>
<a id="download" href="">Скачать файл</a>
JavaScript:
var inputElement = document.getElementById('input'),
downloadElement = document.getElementById('download'),
textareaElement = document.getElementById('textarea');
downloadElement.style.display = 'none';
inputElement.onchange = function() {
var fileList = this.files, // список указанных файлов
textFile = fileList[0]; // для нашего примера берём один файл
// Проверяем тип файла (текстовой файл)
if (textFile.type == 'text/plain') {
// Создаём новый FileReader, который и будет читать наш файл
var reader = new FileReader();
// Событие успешного чтения
reader.onloadend = function(event) {
var text = event.target.result,
blob = new Blob([text], { type: 'text/plain' });
// Ваши любые манипуляции с данными
textareaElement.value = text;
downloadElement.style.display = 'block';
downloadElement.href = URL.createObjectURL(blob);
downloadElement.download = textFile.name;
};
// Событие ошибки
reader.onerror = function() {
alert('Ошибка чтения файла!');
};
// Читаем наш файл как текст
reader.readAsText(textFile);
} else {
alert('Это не текстовой файл!');
}
};
textareaElement.onkeyup = function() {
// Обновляем ссылку скачивания файла
// (ТОЛЬКО ДЛЯ ПРИМЕРА, СКРИПТ ВЫПОЛНЯЕТСЯ ПРИ КАЖДОМ НАЖАТИИ КЛАВИШИ)
var text = this.value,
blob = new Blob([text], { type: 'text/plain' });
downloadElement.href = URL.createObjectURL(blob);
};
П.С. Не могу добавить в ответ больше двух ссылок (из-за ограничения по репутации) но поиск по "FileReader API" даст вам множество дополнительных подсказок и примеров ;)
Есть несколько вариантов со своими преимуществами и недостатками. Посмотрите предлагаемые решения здесь и здесь.
Примеры решений:
1) генерировать файл и по ссылке предлагать пользователю его скачать. Реализация:
function download(text, name, type) {
var a = document.getElementById("a");
var file = new Blob([text], {type: type});
a.href = URL.createObjectURL(file);
a.download = name;
}
<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>
2) Использовать FileSystem API - http://www.html5rocks.com/en/tutorials/file/filesystem/
См. также https://developers.google.com/web/updates/2011/08/Saving-generated-files-on-the-client-side
Если вы хотите использовать javascript для этих целей, то вам подходит node.js
Продвижение своими сайтами как стратегия роста и независимости