有啥方法可以保存用户对 HTML 页面所做的所有更改？
Posted
技术标签:
【中文标题】有啥方法可以保存用户对 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 ></colgroup>
<colgroup span="5" ></colgroup>
<tr>
<td 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 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 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 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 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();
);
);
欢迎提出任何建议。
提前致谢！
【问题讨论】：
【参考方案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 或其他。以上是关于有啥方法可以保存用户对 HTML 页面所做的所有更改？的主要内容，如果未能解决你的问题，请参考以下文章
对对象成员、对象内部、向量内部所做的更改不会在方法结束后继续存在。 C++
在 Chrome Devtools 中检测和观察对样式表所做的更改
使用 XSLT 转换和输入，将用户所做的任何更改保存到初始 XML