Edit in JSFiddle

  $( document  ).ready(function(){
      $(  "#historymaker" ).on( "click" , function(){
      //http://paulirish.com/2009/random-hex-color-code-snippets
        var color  = '#'+Math.floor( Math.random()*16777215  ).toString( 16 ) ;
        $( "body"  ).css( { "background-color" : color } );
        $(  "#reporter" ).text( "The background color is " + color );
        history.pushState(  { "color" : color }, color, color.slice( 1 , color.length  )+".html" ); 
      })

      $( window ).on(  "popstate" , function( e ){
        e = e.originalEvent;
        if ( e.state !== null  ){
          $( "body"  ).css( { "background-color" : e.state.color } ); 
          $(  "#reporter" ).text( "The background color is " +  e.state.color);
        } else {
          $( "body"  ).css( { "background-color" : "#fff" } );
          $(  "#reporter" ).text( "The background color is #ffffff" );
        }
      });

   });
    

<div id="main">
  <button  id="historymaker">click to add to the history stack</button>
  <p  id="reporter">The Background color is #ffffff</p>
</div>