用户所做操作的Javascript历史记录

这是一个有很多可能答案的问题，但我正在寻找最好的解决方法

我需要用户所做动作/移动的历史记录。想象一下，我有一个工作区，用户可以在其中拖动、旋转、调整大小和删除div，类似于：

<div class="myWorkSpace">
     <div id="GUID1" style="left: 30px; top: 10px;"></div>
     <div id="GUID2" style="left: 20px; top: 20px;"></div>
     <div id="GUID3" style="left: 10px; top: 30px;"></div>
</div>

我对更真实的代码进行了修改

用户拖动一个div并更改div的左侧和顶部位置。如果用户按下名为“Undo”的按钮，div将返回到原始位置

我需要做一个动作的历史记录，但在我的脑海里有很多可能性，我不知道是否存在一些插件或一些例子或正确的方法来做到这一点

我想我可以使用一个移动数组，并将更改存储在那里，但我认为这是非常困难的代码。如果您在小提琴中看到我的真实代码，您将看到我有很多代码和每个div的属性，例如，如果用户按下delete div按钮，在撤消后，我将需要恢复已删除div的所有属性（包括guid id）

有什么建议吗？谢谢

这可能是个主意吗

引自

---

什么代码？你的小提琴里只有CSS和HTML，你尝试了什么？除了我们，你还要做所有的工作吗？@Single31我不需要代码，只需要概念！！我不需要任何人来做我的工作……谢谢@Andrius，这篇文章的标题对于寻找更多想法非常有用！！；）

var history = {
stack   : [],
counter : -1,
add     : function(item){
    this.stack[++this.counter] = item;
    this.doSomethingWith(item);

    // delete anything forward of the counter
    this.stack.splice(this.counter+1);
},
undo : function(){
    this.doSomethingWith(this.stack[--this.counter]);
},
redo : function(){
    this.doSomethingWith(this.stack[++this.counter]);
},
doSomethingWith : function(item){
    // show item
}};