How to keep track of which buttons have been pressed after page reloaded?

I'm new to Javascript, and JQuery. After searching the internet for solutions, I decided to post this question.

The problem: When the user clicks on a link within the iframe, it updates the progressbar on the parent, which is only triggered once. BUT, when the user goes to another page, and comes back, the page in the iframe is reloaded, and so is the javascript, meaning that the progressbar can be updated again for that button, which I don't want. Is there any way of keeping track of which elements are clicked, after reload and disabling that function? URL-Parameters??

HTML in iframe:

开发者_开发百科<div id="sidenav">
   <ul>
      <li><a href="../right/section1/page1.html" target="presentation" class="active" name="position">positioning</a></li> 
      <li><a href="../right/section1/page2.html" target="presentation">comparisons</a></li>
    </ul>
</div>

Javascript in iframe page:

$('#sidenav ul li a').one('click', window.parent.updateBar);

---

Whatever you want to record on the client you basically have the same choices:

• cookies
• client-side storage
• url hash

or:

• round-trip to the server and store the data in the results page

---

Something like localStorage. The only drawback is that it is persistent even after rebooting etc, but you can reset the value if your complete website is reloaded. Also it's not supported by IE7 and lower.

function updateBar() {
    if(localStorage['pressed'] == 'true') return; // abort if already pressed

    // do things

    localStorage['pressed'] = 'true'; // save the data that it is pressed
}

---

You probably want to do something like that on the server side. Keeping track of the state of data on a page is typically done on the server side, so that logic can be kept out of the interface. Makes maintenance much easier in the future.