title: Ajax and back button. Hash changes, but where is previous page state stored?
body: <p>I am trying to make ajax work with the back button and am missing something central. Where are the previous page states stored?</p>
  
  <p><b>CASE 1:</b></p>
  
  <p>Click "make me red". ajax event occurs and page turns red. Hash = #red</p>
  
  <p>Click "make me yellow". ajax event occurs and page turns yellow. Hash = #yellow</p>
  
  <p>Click back button. Hash is now back to #red. But I also want the page to be red. It's still yellow.</p>
  
  <p><b>CASE 2:</b></p>
  
  <p>Click "make me red". ajax event occurs and page turns red. Hash = #red</p>
  
  <p>Click "Go to other site". It goes to Google.</p>
  
  <p>Click back button. We're back to site, hash = #red, but I also want the page to be red!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;style&gt;
      .red{background:red}
      .yellow{background:yellow}
  &lt;/style&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(function(){
          $('.ajax_thing').click(function(){
              location.hash=$(this).attr('action_type');
              return false
          })
          var originalTitle=document.title
          function hashChange(){
              var page=location.hash.slice(1)
              if (page!=""){
                  $('#content').load(page+".html #sub-content")
                  document.title=originalTitle+' – '+page
              }
          }
          if ("onhashchange" in window){ // cool browser
              $(window).on('hashchange',hashChange).trigger('hashchange')
          }else{ // lame browser
              var lastHash=''
              setInterval(function(){
                  if (lastHash!=location.hash)
                      hashChange()
                  lastHash=location.hash
              },100)
          }
      })
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;menu&gt;
         &lt;li&gt;&lt;a class="ajax_thing" id = "red_action" action_type="red"&gt;Make me red&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="ajax_thing" id = "yellow_action" action_type="yellow"&gt;Make me yellow&lt;/a&gt;&lt;/li&gt;
  &lt;/menu&gt;
          &lt;li&gt;&lt;a href = "http://www.google.com"&gt;Go to other site&lt;/a&gt;&lt;/li&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;script&gt;
  
  $("#red_action").click(function(e) {
    // ajax here. on success:
      $("body").removeClass("yellow");
      $("body").addClass("red");
  })
  
  $("#yellow_action").click(function(e) {
    // ajax here. on success:
      $("body").removeClass("red");
      $("body").addClass("yellow");
  })
  
  &lt;/script&gt;
  </code></pre>