DOM元素的存储和检索

Question

想知道以前是否有人遇到过这种情况......

我想使用 JavaScript 来识别页面上的 DOM 元素，然后将其引用存储在数据库或 cookie 中以供以后检索。

具体来说，我想要做的是创建一个 UI，以便当用户单击页面上的元素时，JavaScript 会触发单击事件，并传递单击的 DOM 元素的实例。

到目前为止很容易，对吧？

所以我想做的就是存储这个 DOM 元素的“身份”，比如说在数据库中，这样当我稍后返回到这个页面时，我可以取出所有存储的 DOM 元素身份并再次在页面中访问它们。

如果这个 DOM 元素有一个唯一的 ID，那么这很简单。只需存储 ID，然后当页面返回时，我们只需执行 getElementByID 即可再次获得 DOM 元素。

问题在于，并不是 DOM 中的所有内容都有唯一的标识符，所以问题就出在这里。

最初我有一些不好的想法，比如迭代整个 DOM 并使用唯一的类名（dom-01、dom-02 等）递增它们，这会给我一个标识符。但这会导致大量的初始开销，并且如果页面发生更改，DOM 元素的顺序将不相同，因此我们将无法取回正确的 DOM 元素。

我从来没有尝试过，但另一个想法是序列化 DOM 元素，将其粘贴在数据库中，然后重新加载解析到一个对象，并使用该对象来查找我的原始 DOM 元素。我以前从未这样做过，所以如何真正将恢复（解析）的对象与 DOM 中的对象进行比较是一个很大的未知数。

欢迎提供有关序列化解决方案的具体信息或任何其他实现此目的的原创想法！

预先感谢大家！

Answer 1

这是 jsFiddle 解决方案尝试：http://jsfiddle.net/techbubble/pJgyu/7720/

我采用的方法是计算目标元素的 HTML 内容的简单哈希值，或者如果不存在此类内容，则计算元素的聚合属性和值的哈希值。我有一个 getElementHash() 函数，它返回以下格式的字符串： TAG:[H | A]：哈希（H 或 A 表示 HTML 内容或属性是否用于计算哈希）。这会为页面上具有 HTML 内容或至少一个属性的任何元素生成一个唯一的键（可能存在极小的重复风险）。

为了检索具有先前保存的键的元素，我创建了一个 getElementByHash() 函数。它使用从 jQuery 选择器中的键中提取的标签。对于返回的每个元素，计算 HTML 内容或属性哈希（基于键中指定的值“H”或“A”）以查看其是否与键中的哈希匹配。如果存在匹配，则搜索结束并返回该元素。

只要元素的 HTML 内容（或属性）保持不变，这种方法就不受页面上移动元素的影响。它不会为既没有任何 HTML 内容也没有任何属性的元素生成键（这使得它们无论如何都毫无用处）。