title: How to store the state of a page between reloads?
body: <p>I have a website that loads its content by the user clicking a button, then the clicks calls a javascript function that updates just the content of a central <code>&lt;div&gt;</code> element by changing its inner html with AJAX and jQuery.</p>
  
  <p>So for example, when the visitor wants to go to my contact page, they click the contact button, and the div's content is updated to the contact form by pulling that content from an external file and using it to replace the div's <code>innerHTML</code>. The actual address of the entire page doesnt change, as the entire page isnt being reloaded, just the <code>innerHTML</code> of the div.</p>
  
  <p>Further to this, my site uses PHP, and I've coded it such that various content can be populated in the div on page load by passing variables in the url. For example, <code>index.php?page=home</code> will tell the PHP script to load the home page content from an external file, while <code>index.php?page=contact</code> will load the contact form. This way search engines can find each page and their content by following these links in my sitemap.</p>
  
  <p>My problem is that if a visitor clicks a button and loads different content into the div, then clicks the reload button of their browser or presses CTRL+R, the entire page reloads and the div of course reverts to its original content.</p>
  
  <p>My question is, is there a way to load a particular page when the browser refreshes? For example, if the visitor has loaded the page <code>index.php?page=home</code> then clicked on the contact button and updated the div content, then pressed the refresh button of their browser, can i somehow write a script that will load <code>index.php?page=contact</code> instead, preserving the look of the page and the content?</p>