Сохранить значение поля ввода из таблицы html в.txt без необходимости дБ или подачи

Question

Я создаю простую динамическую таблицу в html, и мне нужно написать метод, который сохраняет введенное пользователем значение в текстовое поле в новой строке в текстовом поле. есть идеи? Мой HTML-код выглядит как ниже

   <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

    <INPUT type="button" value="Delete Selected Row" onclick="deleteRow('dataTable')" />

    <INPUT type="button" value="Save Selected Row" onclick="saveRow('dataTable')" />

    <INPUT type="button" value="Edit Selected Row" onclick="EditeRow('dataTable')" />

    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD><INPUT type="text" name="dns[]"/></TD>
            <TD><INPUT type="text" name="domain[]"/></TD>
            <TD><INPUT type="text" name="ip[]"/></TD>


        </TR>
    </TABLE>

JavaScript только вставить и удалить строки на данный момент. и сохранение ввода пока пусто.

 function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;

            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }


    function deleteRow(tableID) 

    {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
    }

    function saveRow(tableID){

        table.saveRow(i);
    }

    function editRow(tableID){

    }

Есть идеи, что использовать? Я бы предпочел использовать javascript, так как вся операция выполняется локально на моей локальной машине.

Answer 1

Это не полный пример, возможно, может дать вам указатели.

function txt(link) {
  link.setAttribute('href', 'data:text/plain,' + encodeURI(document.getElementById('save').value));
}

<input type='text' value='Hello world' placeholder='Save as .txt' id='save' autofocus='' />
<a id='link' target='_blank' onclick='txt(this);' download='note.txt'><input type='button' value='Save as .txt' /></a>

PS. это требует поддержки HTML 5!

Answer 2

Плагин npm: https://www.npmjs.com/package/file-saver

или Chrome: FileSystem API, IE: navigator.msSaveBlob и т. д.

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

Answer 3

Вы не можете читать / писать файлы из JS на стороне клиента. Вы можете отправить данные на ваш сервер с помощью ajax и сохранить их на своем сервере.

Если вы не хотите использовать сервер, есть способы сохранить некоторые данные в браузере:

• использование LocalStorage (ограничено до 5 МБ, может варьироваться в зависимости от браузера)
• использовать куки (даже меньше памяти, чем LocalStorage)

FileSystem API в настоящее время нестандартен, поэтому не все браузеры поддерживают его.