Q:

Saving state of html page on page refresh

Like i mentioned in my other questions, I am building my own web application. 
Now i have this application --> Here's Plunker!  You can see it better here.  Where i have a tab in the header and i can navigate through multiple pages and load its content. 
<! DOCTYPE html>
<html>
  <head>
   <link rel="stylesheet" href="style.css">
   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
   <script src="script.js"></script>
  </head>
<body>
  <a href="link1">Link 1</a>
  <a href="link2">Link 2</a>
 <div id="content">
   <!--  Page content displays here --> 
 </div> 
</body>
</html>

$(document).ready(function(){ 
 $('a').click(function(e){
  var page = $(this).attr('href');   
  $('#content').load(page + '.html');   
  return false; // don't follow the link
 }); 
});

It is working fine!  But i am having problems with saving the state of the page. 
For example if i am on page 2 and i refreshed the browser, the page will go back to its start state.  How can i let stay on the current page on refresh. 
I am very thankful for every solution or tip! 

A:

You have to take advantage of browser's History API.  On each content load, you have to push state to the history. 
On hard refresh, you have to parse the url and fetch the correct content. 
One thing to keep in mind with this approach is that you have to jump through hoops to make it easy for search engine crawlers to index all your "pages". 
Another approach is to use Turbolinks. 
Cheers. 