将 HTML 表单中的数据保存为 XML 或 CSV

Question

需要您就如何在以下情况下以最佳方式进行的建议。我有一个很长的 HTML 表单，它是为离线用户设计的。由于表格很长（而不是电子清单），我需要为用户提供保存和重新打开数据以进一步完成表格的能力。这一切都是离线发生的，所以我想只有javascript？ 目标格式，也许是 XML 或 CSV？在这两种选择中我将面临哪些困难？任何偏好，为什么？ 抱歉，如果这不符合 Stackoverflow 的提问政策））））

如果有帮助，请提供以下表格示例：

<div id="Q403">
        <table class="QTable">
            <tr>
                <td width="45"  align="left" valign="top" scope="row"><div class="QNumber">4.3</div></td>
                <td width="100%"  align="left" valign="top">
                <div class="QText"Question</div>
                </td>
            </tr>
        </table>
        </div>

        <div>
        <table class="RTable">
            <tr>
            <td width="100%"  align="left" valign="top" style="padding-right:20px">
        <div class="Guidance">
            <p>Various Content</p>
        </div>
            </td>

            <td width="550" align="left" valign="baseline">
            <div class="Response">
                <label><input type="radio" name="Radio403" value="Y" id="Radio_403Y" onchange='radioChange(this, "403")'>Yes</label>
                <label><input type="radio" name="Radio403" value="N" id="Radio_403N" onChange='radioChange(this, "403")'>No</label>
                <label><input type="radio" name="Radio403" value="NS" id="Radio_403NS" onChange='radioChange(this, "403")'>Not Seen</label>
                <label><input type="radio" name="Radio403" value="NA" id="Radio_403NA" onChange='radioChange(this, "403")'>Not Applicable</label>
            </div>
            <div class="responseDetails">
                <div class="Observation">
                    <label for="Obs403">Observation:</label>
                    <textarea name="observation" id="Obs403" rows="6" disabled style="width: 530px;"></textarea>
                </div>
                <div>
                    <label for="DueDate">Due date:<br></label>
                <input name="DueDate" class="DueDate" type="date" id="DueDate403"/>
                </div>

                <div class="actions">
                    <label for="pa403">Actions required to correct and/or prevent this observation:</label>
                    <textarea name="actions" id="pa403" rows="6" style="width: 530px;"></textarea>
                </div>
              </div>
            </td>
            </tr>
        </table>
        </div>

我相信你们中的一些人一直在做类似的事情，希望））））

提前致谢）））！

Answer 1

首先，您可以使用“innerHTML”和“localStorage”JavaScript 函数：

这将使您的内容（最多几兆字节）永久存储在您的Browser-DB中。

获取容器元素：

var content = document.getElementById("YourContainerID");

保存：

localStorage["YourFormID"] = content.innerHTML;

加载：

content.innerHTML = localStorage["YourFormID"];

---

要从文件中读取，您可以使用新的实验性 HTML5 文件 API（只读）。

http://www.w3.org/TR/FileAPI/

要写入文件，您还没有直接的选择，除了浏览器插件，例如“Adobe Flash”，您也可以在其中写入文件。或者，您可以（通过 JavaScript）打开一个新窗口，然后将 XML/CSV 写入其中并要求用户手动将新窗口内容保存为文件，方法是要求用户按“Ctrl + S” 。