Сохранение данных из textarea в локальный файл txt с помощью Javascript(JQuery)

Question

Помогите реализовать сохранение данных из textarea в локальный файл txt на компьютер с помощью Javascript(JQuery). Без использования серверов и Ajax.

Answer 1

для этого необходим язык работающий с файловой системой как вариант: php, node. Алгоритм простой, отправляете нужную информацию на сервер а при помощи fetch запроса а дальше работа уже back-end

Answer 2

Есть такой вариант - он не записывает данные в уже созданный файл, а каждый раз по клику формирует новый файл с текстом из textarea и сохраняет в папку, которая указана в настройках браузера как папка для скачивания.

Здесь код почему-то не отрабатывает (видимо, блокируется), поэтому даю ссылку на рабочий пример в "песочнице" - https://jsfiddle.net/tumo7p09/

P.S. Правда практического смысла в подобной реализации нет: зачем Вам самой писать что-то у себя в браузере, чтобы сохранить это у себя же на локальном компе? Подозреваю, что перед Вами стоит какая-то иная задача (например, записывать в файл информацию, которую оставляют другие пользователи сайта), но здесь без сервера уже точно не обойтись.

document.getElementsByTagName('a')[0].onclick = function() {
  let text = document.getElementById('text').value;
  if(text != '') {
    let csvData = 'data:application/txt;charset=utf-8,' + encodeURIComponent(text);
    this.href = csvData;
    this.target = '_blank';
    this.download = 'txt.txt';
  }
  else {
    return false;
  }
}

<textarea id="text"></textarea><br>
<a href="#">записать в файл</a>

Answer 3

Начиная с Chrome версии 82, вы можете использовать File System Access API для работы с локальными файлами. Т.е. построить полноценное десктопное приложение внутри браузера.

Вот ссылки (англ.) с простыми примерами. Если вы уже знакомы с JavaScript, то легко разберетесь:

Ниже простейший пример с textarea — можете протестировать его в виде локального html-файла или у себя на хостинге (здесь в iframe-песочнице не заработает корректно).

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> File System Access API Test</title>
</head>

<body>
    <button id="butOpenFile">Открыть файл</button>  
    <button id="butSaveFile">Сохранить</button> <br><br>
    <textarea id="textArea"></textarea>
    
<script>
    let butOpenFile = document.getElementById('butOpenFile');
    let butSaveFile = document.getElementById('butSaveFile');
    let textArea = document.getElementById('textArea');

    async function writeFile(fileHandle, contents) {
      const writable = await fileHandle.createWritable();
      await writable.write(contents);
      await writable.close();
    }   

    let fileHandle;
    let saveTo;

    butOpenFile.addEventListener('click', async () => {
      [fileHandle] = await window.showOpenFilePicker();
      const file = await fileHandle.getFile();
      const contents = await file.text();
      textArea.value = contents;
    });

    butSaveFile.addEventListener('click', async () => {
    if (typeof saveTo == 'undefined') {
        saveTo = await window.showSaveFilePicker();
    } 
     writeFile(saveTo, textArea.value);
    });     
</script>   
</body>
</html>

БЛОГ НА HUSL

Сохранение данных из textarea в локальный файл txt с помощью Javascript(JQuery)

Ответы (3 шт):