title: How to store and retrieve later data() object from DOM element for undo/redo functionality
body: <p>I am implementing undo/redo in my js app (sticker designer with drawing/change color etc.). I'm using basic example <a href="https://stackoverflow.com/a/31149931/1802137">https://stackoverflow.com/a/31149931/1802137</a></p>
  
  <p>For simple storing it is something like this:</p>
  
  <pre><code>var undo = []; var redo = [];
  function editor_add(){
     undo.push($("#parentDiv").html());
  }
  editor_add();
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='parentDiv'&gt;
   &lt;span id='id-0'&gt;&lt;/span&gt;
   &lt;span id='id-1'&gt;&lt;/span&gt;
   &lt;span id='id-2'&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I retrieve it with:</p>
  
  <pre><code>function editor_undo(){
      var item_redo = undo.pop();
      redo.push(item_redo);
      var item = undo.pop();
      if(item){
         redo.push(item);
         $("#parentDiv").html(item);
      }
  }
  </code></pre>
  
  <p>It works with reverting DOM elements, but of course it doesn't save data() from each element, just a whole html within parent.</p>
  
  <p>I figured out I'd need to store all data() for each element in array together with html. So, I guess I could put html string in each data object, then retrieve it with the rest of data. Array should be:</p>
  
  <pre><code>undo = [{html0, data0},{html1, data1},{html2, data2}];
  </code></pre>
  
  <p>Or is there a better way to store selector html with data and then put it back?</p>
  
  <p>Here's the example of two data() object stored in array (first one is undefined).</p>
  
  <p><a href="https://i.stack.imgur.com/GpR4f.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GpR4f.jpg" alt="Here&#39;s the example of two data() object stored in array (first one is undefined)."></a></p>