title: Change and keep active class in navigation menu, on click and refresh
body: <p>I am trying to create a navigation menu using css and js. I have styled the necessary classes, and nav works with js animation, however I am having a problem changing the class of li to active onclick by the user, and saving this in local storage so that it remains when the page refreshes. </p>
  
  <p>This is the code that I have now:
  <a href="http://codepen.io/anon/pen/wfpti" rel="nofollow">http://codepen.io/anon/pen/wfpti</a></p>
  
  <p>Javascript:</p>
  
  <pre><code>var foundActive = false, activeElement, linePosition = 0, menuLine = $("#navmenu #menu-line"), lineWidth, defaultPosition, defaultWidth;
  
  $("#navmenu &gt; ul &gt; li").each(function() {
    if ($(this).hasClass('active')) {
      activeElement = $(this);
      foundActive = true;
  }
  });
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id='navmenu'&gt;
  &lt;ul&gt;
     &lt;li class='active'&gt;&lt;a href='link1.php'&gt;link1&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='link2.php'&gt;link2&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='link3.php'&gt;link3&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='link4.php'&gt;link4&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='link5.php'&gt;link5&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='link6.php'&gt;link6&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='link7.php'&gt;link7&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I would like to achieve is that when I press, for example, "link3" is that it goes to link3.php, and the navigation menu then shows link3 as the active class link, while removing the previous active class for link1.</p>