如何从DOM元素存储和检索以后的data（）对象以进行撤消/重做功能

Question

我正在我的js app中实现undo / redo（带有绘图/更改颜色的贴纸设计师等）。我正在使用基本示例https://stackoverflow.com/a/31149931/1802137

对于简单存储，它是这样的：

var undo = []; var redo = [];
function editor_add(){
   undo.push($("#parentDiv").html());
}
editor_add();

HTML：

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

然后我用：

检索它

function editor_undo(){
    var item_redo = undo.pop();
    redo.push(item_redo);
    var item = undo.pop();
    if(item){
       redo.push(item);
       $("#parentDiv").html(item);
    }
}

它适用于还原DOM元素，但当然它不会从每个元素中保存data（），只是在父元素中保存整个html。

我发现我需要将所有数据（）与html一起存储在数组中。所以，我想我可以在每个数据对象中放入html字符串，然后用剩余的数据检索它。数组应该是：

undo = [{html0, data0},{html1, data1},{html2, data2}];

或者有没有更好的方法来存储选择器html与数据，然后把它放回去？

以下是存储在数组中的两个data（）对象的示例（第一个是未定义的）。

Answer 1

根据这里的问题，我们将undo视为将保存所有数据的json对象。数据应保存为

var undo = [{ html0: data0 }, { html1: data1 }, { html2: data2 }];
//Saving to LocalStorage. 
//Advantages are data is still available on postback / reload of page

function saveToLocalStorage() {
    window.localStorage.setItem("undo", JSON.stringify(undo));
}

function getFromLocalStorage() {
    undo = JSON.parse(window.localStorage.getItem("undo"));
}