将输入字段值从 html 表保存到 .txt 中，无需 db 或 serve

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>

附言。这需要 HTML 5 支持！

Answer 2

您无法从客户端 JS 读取/写入文件。您可以使用 ajax 将数据发送到您的服务器并保存在您的服务器机器上。

如果你不想使用服务器，有一些方法可以在浏览器中保存一些数据：

• 使用LocalStorage（限制在5MB左右，可能因浏览器而异）
• 使用 cookie（内存甚至比 LocalStorage 还要少）

FileSystem API 目前是非标准的，因此并非所有浏览器都支持它。

Answer 3

npm 插件：https://www.npmjs.com/package/file-saver

或 Chrome：FileSystem API，IE：navigator.msSaveBlob 等

bowser 来检查特定的浏览器，您可以稍后为非文件系统 API 浏览器注入 flash 脚本，或者使用它们特定的 JS 库到本机系统接口。