title: I know its bad to store data in the DOM, but why?
body: <p>I've heard over and over again that it is bad practice to "use the DOM as a database."</p>
  
  <p>While I mostly agree with that sentiment, this question is more about the less black and white cases. Keeping in mind the latest revisions to jQuery's <code>.data()</code> methods and the HTML5 data-attribute spec, is it really so bad to stick some data in the DOM for the sake of convenience?</p>
  
  <p>For example, I recently implemented a "live" calculation feature on a table full of inputs by doing something like this:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="text"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="text"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('table').bind('calculate',function(){
    var total = 0;
    $(this).find('tr').each(function(){
      total += $(this).data('value');
    });
    // display total
  });
  
  $('table input').bind('change keyup',function(){
    $(this).closest('tr').data('value',$(this).val());
    $(this).closest('table').trigger('calculate');
  });
  </code></pre>
  
  <p>This is an over-simplified example because I <em>could</em> skip the calls to <code>.data()</code> and go straight to the input values, but let's imagine a slightly more complex scenario where elements other than inputs are affecting the row values.</p>
  
  <p><strong>Is it wrong to use the DOM to store simple data in this kind of situation?</strong></p>