有什么方法可以保存用户对 HTML 页面所做的所有更改？答案

【问题标题】：Is there any way to save all changes a user has made to an HTML page?有什么方法可以保存用户对 HTML 页面所做的所有更改？
【发布时间】：2016-10-12 12:48:12
【问题描述】：

我有一个 HTML 页面形式的程序，其中包含可拖放元素和可内容编辑元素。有什么方法可以同时保存元素的位置以及 contenteditable 文本？每种类型的元素可能有一百多个，我无法预先制作它们的 id，因为它们是在单击按钮时生成的。我已经研究过使用 localStorage，但没有发现任何与我的问题有关的东西。它必须是一个简单的解决方案，我可以在任何事情发生时应用它。

这是我缩短的 HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

        <style>
            td {
                border: 1px solid black;
            }
            .tile {
                cursor: move;
                min-width: 48px;
                width: fit-content;
                height: 24px;
                background-color: red;
                border: 1px solid black;
            }
        </style>
    </head>

    <body>
        <button id="addTileButton">Click to add tile</button>
        <div contenteditable="true" id="tableDiv">
            <table cellspacing="0" border="0">
                <colgroup width="509"></colgroup>
                <colgroup span="5" width="166"></colgroup>
                <tr>
                    <td height="32" align="left" valign=bottom><b><font face="Cambria">State Name</font></b></td>
                    <td align="left" valign=bottom><b><font face="Cambria">GA (P)</font></b></td>
                    <td align="left" valign=bottom><b><font face="Cambria">C.3</font></b></td>
                    <td align="left" valign=bottom><b><font face="Cambria">ExCom</font></b></td>
                    <td align="left" valign=bottom><b><font face="Cambria">HRC</font></b></td>
                    <td align="left" valign=bottom><b><font face="Cambria">SC</font></b></td>
                </tr>
                <tr>
                    <td height="32" align="left" valign=bottom>Afghanistan</td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                </tr>
                <tr>
                    <td height="32" align="left" valign=bottom>Albania</td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                </tr>
                <tr>
                    <td height="32" align="left" valign=bottom>Algeria</td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                </tr>
                <tr>
                    <td height="32" align="left" valign=bottom>Andorra</td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom><font color="#000000"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                    <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font></td>
                </tr>
            </table>
        </div>
    </body>
</html>

这是我的 JavaScript：

$(document).ready(function() {
    $("#addTileButton").click(function() {
        $("body").append("<div id=draggable></div>");
        var tile = $("<div class=tile contenteditable=true></div>");
        $("#draggable").append(tile);
        $(".tile").draggable().resizable();
        $("#tableDiv").droppable();
        $("<td>").resizable();
    });
});

欢迎提出任何建议。

提前致谢！

【问题讨论】：

标签： javascript jquery html save

【解决方案1】：

有三种方法可以做到这一点。 1) 将用户进行更改的整个 html 保存为模板。这不建议作为while saving的页面，可以注意到information is lost的部分。

2) 保存whole html structure of the div which you need in a javascript variable 并将其存储在数据库中。需要时从服务器获取并按原样显示，只需将 parentDiv 的 innerHtml 设置为您从服务器获取的数据即可。

3) 我个人更喜欢的方法。 Save the state of your html div in a JSON format（information like width, height, positions, images of divs 等）。将其存储在数据库中。现在创建一个rest API 并在需要时获取JSON 数据。解析它并根据需要显示它。更清洁的方法！

【讨论】：

请阅读我对第一个答案的最后评论，并根据您的建议进行回答。谢谢！
@GabrielSchetter 您可以从DOM 获得所有这些属性。例如。 document.getElementById('myDiv') 获取元素，然后获取其属性。您可以在link 中获取更多信息。如果可能的话，我更喜欢使用jQuery，如果你使用它，事情将变成much easier。例如。要获得元素的位置，您只需执行 $('#myDiv').position().
使用按钮生成的元素具有相同的类，并且给它们每个单独的 id 将是一个非常复杂的过程（我认为）。虽然它可能适用于少于几百个元素的东西，但我认为这不是我想要的。如果我遗漏了什么，请告诉我。
@GabrielSchetter 您不需要为单独的元素提供单独的 ID 来访问它们。我只是举一个例子来说明清楚。无论如何，您可以遍历您的表格（在循环中，jQuery 中的 .each() 函数）并保存其子项的位置。明白我的意思了吗？我希望它有帮助。
我隐约明白你的意思。你能给我一个示例代码吗？谢谢你一直陪着我。 :)

【解决方案2】：

做到这一点的最佳方法是将每个对象的状态保存在 json 中并将其保存在数据库中。因此，在 rest api 的帮助下，您可以取回数据并从您创建的相同状态 json 重建所有内容。

已编辑 - 所以我在一个类似项目中所做的是获取所有 html 属性数据，如宽度、高度、位置 x 和 y 等，并将其存储在像

这样的对象上

    "input1": {
      "text": "Hello",
      "placeholder": "Put a text in here!",
      "width": "100%",
      "height": "100%",
      "position" : {
        "x": 10,
        "y": 10
      }
    }

将所有对象放在一个中，并将其作为 JSON 传递到服务器上，然后从同一个对象重建它。 你肯定需要的不仅仅是 javascript。

【讨论】：

您能解释一下这个过程吗？我对 JSON 不是很熟悉。
JSON 就像 XML。它只是一种保存数据的格式，基于熟悉的 JS 语法。
为了使用您更新的建议，我是否必须输入所有这些内容，或者有什么方法可以仅根据元素定位自动获取它们？同样，我无法输入所有内容，因为我事先不知道任何信息。
我建议首先创建一个带有 id 的展示位置 (div)，其中可能包含所有其他对象。然后创建一个函数来读取 HTML 对象属性并使用您想要的信息构建一个对象。最后，在保存每个 HTML 对象时，您可以调用此函数并将返回值保存在全局状态中。您可以将这个全局状态变量/对象解析为 JSON 或其他。