title: Call javascript to preserve filter state when traverse from other page via href
body: <p>I have a number of webpages in a report each page has a checbox filter that if selected calls javascript to show hide some elements of the page, the checkbox filter enables to true, all pages are created in advance. The user can traverse from one pages by clocking on a url .</p>
  
  <p>The trouble is because the pages are created in advance the filter always default to true, even if just set to false by user on previous page. I think I need to call some javascript to set the value of the filter to the value of the filter on the calling page but because traversing form page to page via a hyperlink I dont know how to call the Javascript.</p>
  
  <p>FYI 
  Html Filter</p>
  
  <pre><code>&lt;div class="mb-2"&gt;
      &lt;div class="form-group form-check"&gt;
          &lt;input type="checkbox" class="form-check-input" name="showLabels" id="showLabels" checked="checked" onclick="toggleLabelsFilter(&amp;#x27;showLabels&amp;#x27;);"&gt;
          &lt;label for="showLabels" id="showLabelslabel" class="form-check-label"&gt;
              Show Labels
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Example html that will have elements hidden</p>
  
  <pre><code>&lt;figure class="figure" style="position:relative"&gt;
              &lt;a href="StatusReport00017_byfolder00021.html"&gt;
                  &lt;img src="../images/E__Melco_TestMusic_WAV_WAV_Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders.jpg" class="figure-img" width="200" height="200"&gt;
              &lt;/a&gt;
              &lt;div style="position:absolute; top:144px;"&gt;
                  &lt;div class="badge ml-2 badge-primary"&gt;
                      12 files
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="position:absolute; top:166px;"&gt;
                  &lt;div class="badge ml-2 badge-success"&gt;
                      12&amp;nbsp;MB
                  &lt;/div&gt;
                  &lt;div class="badge ml-2 badge-warning"&gt;
                      0&amp;nbsp;Discogs
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;figcaption class="figure-caption"&gt;
                  &lt;a href="StatusReport00017_byfolder00021.html"&gt;
                      Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders
                  &lt;/a&gt;
              &lt;/figcaption&gt;
          &lt;/figure&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>function toggleLabelsFilter(filterName)
  {
        var checkbox = document.getElementById(filterName);
        if(checkbox.checked)
        {
               var badges = document.getElementsByClassName("badge");
               for (i = 0; i &lt; badges.length; i++)
               {
                 badges[i].style.visibility = "visible";
               }
        }
        else
        {
              var badges = document.getElementsByClassName("badge");
              for (i = 0; i &lt; badges.length; i++)
              {
                  badges[i].style.visibility = "hidden";
              }
        }
  }
  </code></pre>
  
  <p><strong>Edit Update</strong>
  Attempt based on comments </p>
  
  <p>Called when user selects checkbox</p>
  
  <pre><code>function toggleLabelsFilter()
  {
        var checkbox = document.getElementById("showLabels");
        if(checkbox.checked)
        {
               sessionStorage.setItem("showLabels", true);
               var badges = document.getElementsByClassName("badge");
               for (i = 0; i &lt; badges.length; i++)
               {
                 badges[i].style.visibility = "visible";
               }
        }
        else
        {
              sessionStorage.setItem("showLabels", false);
              var badges = document.getElementsByClassName("badge");
              for (i = 0; i &lt; badges.length; i++)
              {
                  badges[i].style.visibility = "hidden";
              }
        }
  }
  </code></pre>
  
  <p>Called when page loaded</p>
  
  <pre><code>function checkFilter()
  {
      if(sessionStorage.getItem("showLabels")==true)
      {
          document.getElementById("showLabels").checked=true;
          var badges = document.getElementsByClassName("badge");
          for (i = 0; i &lt; badges.length; i++)
          {
              badges[i].style.visibility = "visible";
          }
      }
      else
      {
          document.getElementById("showLabels").checked=false;
          var badges = document.getElementsByClassName("badge");
          for (i = 0; i &lt; badges.length; i++)
          {
              badges[i].style.visibility = "hidden";
          }
      }
  }
  </code></pre>