title: Using cookies to retain stylesheet preference across website
body: <p>I've got a simple javascript function which allows me to swap between different stylesheets in each page of my website. At the moment I don't have any cookies being implemented on the site so whenever I go to a new page the default stylesheet is loaded and if a user wanted to use the alternate stylesheet they would be forced to swap again. I want to make it to where by using cookies, whatever stylesheet the user chooses will remain when going to a different page.</p>
  
  <p>Below I've got the following code which is my method of swapping stylesheets.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var i=1;
      function styleSheet(){
          if(i%2==0){
              swapper('css/main.css');            
          }
          else{
              swapper('css/stylesheetalternate.css');             
          }
          i++;
      }
  &lt;/script&gt; 
  &lt;script&gt;
      function swapper(select_sheet){
          document.getElementById('swapper').setAttribute('href', select_sheet);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>So far I haven't been able to get it to where the webpage would remember what the user chose as their stylesheet theme and when reloading the page keep the same stylesheet. This is my first time working with cookies and I'm mostly just looking for a way to implement this with my original javascript.</p>
  
  <p>EDIT: Also just as a heads up, I only know front end web programming at this point. Based on Dave A's answer, would I adapt my current styleSheet() function as follows or is this not even necessary anymore? One thing I've had a bit of a hard time understanding is how the key works.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var i=1;
      function styleSheet(){
          if(i%2==0){
              storeStyleSheet(sheet1, main.css);
          }
          else{
              storeStyleSheet(sheet2, alternate.css);             
          }
          i++;
      }
  &lt;/script&gt; 
  &lt;button onclick()="setStoredStyleSheet (styleSheetKey)"&gt;click here&lt;/button&gt;
  </code></pre>