title: How can I store functions within the HTML5 history states
body: <p>So I'm using the HTML5 history management for adding the ability to navigate back and forward within a website with AJAX loaded subcontent.</p>
  
  <p>Now I would like to store javascript functions within the state object, to callback at the state popping. More or less like the following code:</p>
  
  <pre><code>$(window).bind("popstate", function(event) {
      var state = event.originalEvent.state;
      if (!state) {
          return;
      }
      state.callback(state.argument);
  }
  
  function beforeLoad() {
      var resourceId = "xyz";
      var func;
  
      if (case1) {
          func = switchPageToMode1;
      } else { // case 2
          func = swithPageToMode2;
      }
  
      func(resourceId); // run the function
      window.history.pushState({ callback: func, resourceId: resourceId }, "newTitle", "newURL"); // and push it to history
  }
  
  function switchPageToMode1(resourceId) {
      alterPageLayoutSomeWay();
      loadResource(resourceId);
  }
  
  function swithPageToMode2(resourceId) {
      alterPageLayoutSomeOtherWay();
      loadResource(resourceId);
  }
  
  function loadResource(resourceId) {
      ...
  }
  </code></pre>
  
  <p>All right. So what I'm trying to do is storing a reference to a javascript function. But when pushing the state (the actual window.history.pushState call) the browser files a complaint, namely <strong>Error: "DATA_CLONE_ERR: DOM Exception 25"</strong></p>
  
  <p>Anybody knows what I'm doing wrong? Is it at all possible to store function calls within the state?</p>