title: HTML5 History API - store a div in pushState
body: <p>There are two things that are dynamic: a navigation div, and a content div. Instead of storing both, my plan is to store the entire body div in the first parameter of <code>pushState</code>.</p>
  
  <p>What is the proper way to store the data? I have tried the following which products an error <code>Uncaught DataCloneError: Failed to execute 'pushState' on 'History': An object could not be cloned.</code>:</p>
  
  <pre><code>history.pushState($('.body-content'), newTitle, newURL);
  </code></pre>
  
  <p>This is how it's going to handle popstate, untested:</p>
  
  <pre><code>    window.onpopstate = function (event) {
          updateContent(event.state);
      };
  
      function updateContent(data) {
          if (data == null)
              return;
  
          $('.body-content').html(data);
      }
  </code></pre>
  
  <p><strong>edit</strong>: Adding <code>.html()</code> to the jQuery selector worked:</p>
  
  <pre><code>history.pushState($('.body-content').html(), 'testTitle', getURL(newQuery));
  </code></pre>
  
  <p>But popstates are still inconsistent, currently looking into this further. I suspect that the data is being restored to the wrong level in the nest of div's, and the Leaflet map will have stale variables that should've also been saved in the pushState.</p>