当通过href从其他页面遍历时，调用javascript以保留筛选器状态

我在一个报告中有许多网页，每个页面都有一个checbox过滤器，如果选中该过滤器调用javascript显示隐藏页面的某些元素，复选框过滤器将启用true，所有页面都将提前创建。用户可以通过在url上计时来遍历一个页面

问题在于，页面是提前创建的，过滤器总是默认为true，即使用户在上一页上刚刚设置为false也是如此。我想我需要调用一些javascript来将过滤器的值设置为调用页面上过滤器的值，但是因为通过超链接遍历表单页面到页面，我不知道如何调用javascript

供参考 Html过滤器

<div class="mb-2">
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" name="showLabels" id="showLabels" checked="checked" onclick="toggleLabelsFilter(&#x27;showLabels&#x27;);">
        <label for="showLabels" id="showLabelslabel" class="form-check-label">
            Show Labels
        </label>
    </div>
</div>

显示标签

将隐藏元素的html示例

<figure class="figure" style="position:relative">
            <a href="StatusReport00017_byfolder00021.html">
                <img src="../images/E__Melco_TestMusic_WAV_WAV_Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders.jpg" class="figure-img" width="200" height="200">
            </a>
            <div style="position:absolute; top:144px;">
                <div class="badge ml-2 badge-primary">
                    12 files
                </div>
            </div>
            <div style="position:absolute; top:166px;">
                <div class="badge ml-2 badge-success">
                    12&nbsp;MB
                </div>
                <div class="badge ml-2 badge-warning">
                    0&nbsp;Discogs
                </div>
            </div>
            <figcaption class="figure-caption">
                <a href="StatusReport00017_byfolder00021.html">
                    Antonin Dvorak; Itzhak Perlman, Daniel Barenboim, Samuel Sanders
                </a>
            </figcaption>
        </figure>

12个文件
12 MB
0迪斯科舞厅

Javascript

function toggleLabelsFilter(filterName)
{
      var checkbox = document.getElementById(filterName);
      if(checkbox.checked)
      {
             var badges = document.getElementsByClassName("badge");
             for (i = 0; i < badges.length; i++)
             {
               badges[i].style.visibility = "visible";
             }
      }
      else
      {
            var badges = document.getElementsByClassName("badge");
            for (i = 0; i < badges.length; i++)
            {
                badges[i].style.visibility = "hidden";
            }
      }
}

函数切换标签过滤器（过滤器名称）
{
var checkbox=document.getElementById（filterName）；
如果（复选框。选中）
{
var badges=document.getElementsByCassName（“badge”）；
对于（i=0；i

编辑更新 基于评论的尝试

当用户选择复选框时调用

function toggleLabelsFilter()
{
      var checkbox = document.getElementById("showLabels");
      if(checkbox.checked)
      {
             sessionStorage.setItem("showLabels", true);
             var badges = document.getElementsByClassName("badge");
             for (i = 0; i < badges.length; i++)
             {
               badges[i].style.visibility = "visible";
             }
      }
      else
      {
            sessionStorage.setItem("showLabels", false);
            var badges = document.getElementsByClassName("badge");
            for (i = 0; i < badges.length; i++)
            {
                badges[i].style.visibility = "hidden";
            }
      }
}

函数切换标签过滤器（）
{
var checkbox=document.getElementById（“showLabels”）；
如果（复选框。选中）
{
setItem（“showLabels”，true）；
var badges=document.getElementsByCassName（“badge”）；
对于（i=0；i

加载页面时调用

function checkFilter()
{
    if(sessionStorage.getItem("showLabels")==true)
    {
        document.getElementById("showLabels").checked=true;
        var badges = document.getElementsByClassName("badge");
        for (i = 0; i < badges.length; i++)
        {
            badges[i].style.visibility = "visible";
        }
    }
    else
    {
        document.getElementById("showLabels").checked=false;
        var badges = document.getElementsByClassName("badge");
        for (i = 0; i < badges.length; i++)
        {
            badges[i].style.visibility = "hidden";
        }
    }
}

函数checkFilter（）
{
if（sessionStorage.getItem（“showLabels”）==true）
{
document.getElementById（“showLabels”）.checked=true；
var badges=document.getElementsByCassName（“badge”）；
对于（i=0；i

您能在单击时设置一个过滤器cookie，然后读取该cookie以决定显示什么吗？您也可以将状态存储在localstorage中。我现在不使用cookie，甚至不希望使用local storage，我什么时候可以打电话实际检查该local storage，想保持尽可能简单吗possible@Muhammad您好，我创建了一个javascript函数，它运行onLoad（），但不确定如何使用本地storage@PaulTaylor单击选项卡时，可以使用

localStorage.setItem（“activetab”，“某些选项卡索引”）

，然后调用

localStorage.getItem（“activetab”）

在您的onload功能中，并设置活动选项卡。您应该知道如何通过遍历DOM元素来实现这一点。