title: creating a page load counter with innerHTML property
body: <p>I am trying to create a webpage that counts how many times it has been loaded. This number is shown to users. I am using localhost MAMP. This is the code I am using:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1 id="counter"&gt; 1 &lt;/h1&gt;
      &lt;script&gt;
          function increase(){
              var counterElement = document.getElementById("counter");
              var counter = counterElement.textContent;
              counter++;
              counterElement.innerHTML = counter;
          }
  
          window.onload = increase;
         &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It increases the counter variable only the first time the page is loaded. On subsequent refreshes is does nothing. The counter just stays 2. What am I doing wrong? I thought that innerHTML property inserts new html into the page. That html doesn't seem to persist during page refreshes. Is there a better alternative way create page counts? It will only be used for personally so bad peformance isn't a problem.</p>