如何从DOM元素存储与还原data()对象以实现撤销/重做功能

嘿，我明白你现在的困境——用HTML字符串保存状态确实拿不到jQuery绑定的data()对象，毕竟这些数据是存在内存缓存里的，不会自动跟着HTML序列化走。下面给你一套可行的方案，把DOM结构和data数据一起序列化存储，完美支持撤销/重做功能：

核心思路 #

不再直接存储HTML字符串，而是序列化包含DOM结构和对应data()数据的状态对象，还原时再根据这个对象重新构建DOM并绑定data。

完整实现代码 #

JavaScript部分 #

var undo = []; 
var redo = []; 

// 序列化当前编辑器的完整状态（DOM结构 + 所有元素的data()数据）
function serializeEditorState() {
  var elements = [];
  $("#parentDiv span").each(function() {
    var $el = $(this);
    elements.push({
      id: $el.attr("id"),
      html: $el.html(),
      data: {...$el.data()} // 解构data对象，生成新的可存储副本
    });
  });
  return { elements };
}

// 根据序列化的状态还原编辑器
function restoreEditorState(state) {
  var $parent = $("#parentDiv");
  $parent.empty(); // 清空现有内容

  state.elements.forEach(function(elInfo) {
    // 重建DOM元素
    var $newEl = $("<span>")
      .attr("id", elInfo.id)
      .html(elInfo.html);
    // 还原所有data()数据
    $newEl.data(elInfo.data);
    $parent.append($newEl);
  });
}

// 替代原有editor_add，保存当前状态到撤销栈
function editor_add() { 
  undo.push(serializeEditorState());
  // 有新操作时清空重做栈（因为之前的重做路径已失效）
  redo = [];
}

// 撤销操作
function undoAction() {
  // 至少保留初始状态，避免栈空
  if (undo.length > 1) {
    var currentState = undo.pop();
    redo.push(currentState);
    var prevState = undo[undo.length - 1];
    restoreEditorState(prevState);
  }
}

// 重做操作
function redoAction() {
  if (redo.length > 0) {
    var nextState = redo.pop();
    undo.push(nextState);
    restoreEditorState(nextState);
  }
}

// 初始化时保存初始状态
editor_add();

对应HTML结构（无需修改） #

<div id='parentDiv'> 
  <span id='id-0'></span> 
  <span id='id-1'></span> 
  <span id='id-2'></span> 
</div>

关键细节说明 #

• 为什么要解构$el.data()：直接存$el.data()会拿到jQuery内部的缓存对象引用，后续修改DOM会同步改变栈里的状态，解构后生成独立副本，保证每个状态都是固定快照。
• 复杂data的处理：如果你的data里包含函数、DOM元素引用这类不可序列化的数据，需要额外处理：
  • 函数：可以存储函数的标识，还原时根据标识重新绑定；
  • DOM引用：存储目标元素的id或选择器，还原时通过选择器重新获取。
• 性能优化：如果编辑器操作频繁，可以添加防抖逻辑，比如连续100ms内的操作只保存一次状态，减少内存占用。

内容的提问来源于stack exchange，提问作者altermind