Fatal编程技术网
  • javascript/
  • Javascript 刷新后保持失效状态

Javascript 刷新后保持失效状态

javascript html

Javascript 刷新后保持失效状态,javascript,html,toggle,collapse,Javascript,Html,Toggle,Collapse,在我的侧边栏中，我包含了一个显示/隐藏表单的折叠按钮。现在我想在刷新页面时保持折叠状态： 如果表单在刷新页面之前已取消折叠，则刷新后必须保持此状态 我想我需要在JavaScript中使用localStrorage，但实际上我不知道如何使用它 这是我的HTML： <!-- Sidebar --> <ul class="sidebar navbar-nav"> <li class="nav-item active">

在我的侧边栏中，我包含了一个显示/隐藏表单的折叠按钮。现在我想在刷新页面时保持折叠状态： 如果表单在刷新页面之前已取消折叠，则刷新后必须保持此状态

我想我需要在JavaScript中使用localStrorage，但实际上我不知道如何使用它

这是我的HTML：

<!-- Sidebar -->
    <ul class="sidebar navbar-nav">
         <li class="nav-item active">
                  <a class="nav-link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                      <i class="fa fa-filter"></i>
                      <span>Search Filter</span>
                  </a>
          </li>


 </ul>

<!-- Form -->
<div class="collapse" id="collapseExample">
<form>
......
</form>
谢谢你的帮助

下面是一个Bootstrap 4折叠示例。与初学者模板的主要区别在于，我将jQuery导入移到了文件的顶部，以便使用document.load函数。我已经在代码中添加了注释，但如果还有什么不清楚的地方，请继续提问。请注意，我将香草javascript答案留给了历史注释，以防它也对您有所帮助

我在这里使用了初学者页面：

这里的第一个崩溃示例： 


你好，世界！
$（函数（）{
//存储对折叠div的引用，以便
//我们不必一直在dom中查找它
常量collapseExample=$（“#collapseExample”）；
//将回调函数注册到
//将在每次打开折叠时调用。
collapseExample.on（“show.bs.collapse”，function（））{
//因为我们知道这个函数是在
//打开，我们将本地存储值设置为“show”
setItem（“collapseExample”、“show”）；
});
//将回调函数注册到
//将在每次塌陷关闭时调用。
collapseExample.on（“hidden.bs.collapse”，function（））{
//因为我们知道这个函数是在
//打开，我们将本地存储值设置为“隐藏”
setItem（“collapseExample”、“hide”）；
});
//由于此函数在页面加载时运行（仅指一次），因此我们可以
//从这里检查localStorage的值，然后调用
//引导折叠方法：
//检查localStorage项的值
const showExampleCollapse=localStorage.getItem（“collapseeExample”）；
//根据localStorage项的值操纵折叠。
//请注意，该值由第36行或第44行确定。如果更改这些值，
//然后确保检查下一行的比较是否仍然有效。
如果（showExampleCollapse==“显示”）{
折叠例如：折叠（“显示”）；
}否则{
折叠例如：折叠（“隐藏”）；
}
});

带数据目标的按钮


动物教区的陈词滥调
特里·理查森和乌贼。Nihil anim keffiyeh helvetica，工艺啤酒
劳尔·韦斯·安德森是一位杰出的智者。
结束引导应答

开始回答问题

这是一个基本的，独立的版本，你似乎在尝试做什么。这并不漂亮，但希望很清楚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    function getCollapsed() {
        const state = localStorage.getItem('collapsed');
        if(state === 'collapsed'){
            return true;
        }
        return false;
    }
    function getStatus(){
        const resultDiv = document.getElementById('result');
        const isCollapsed = getCollapsed();
        if(isCollapsed){
            resultDiv.innerHTML = "collapsed";
        }else{
            resultDiv.innerHTML = "un-collapsed";
        }
    }
    function toggleCollapse(){
        const isCollapsed = getCollapsed();
        if(isCollapsed){
            localStorage.setItem('collapsed', 'un-collapsed');
        }else{
            localStorage.setItem('collapsed', 'collapsed');
        }
        getStatus();
    }
    </script>
</head>
<body onload="getStatus()">
    <div>
        <button onclick="toggleCollapse()">Toggle Collapse</button>
    </div>
    <div id="result"></div>
</body>
</html>


文件
函数getCollapsed（）{
const state=localStorage.getItem（'collapsed'）；
如果（状态==‘折叠’）{
返回true；
}
返回false；
}
函数getStatus（）{
const resultDiv=document.getElementById（'result'）；
const isCollapsed=getCollapsed（）；
如果（已合并）{
resultDiv.innerHTML=“折叠”；
}否则{
resultDiv.innerHTML=“取消折叠”；
}
}
函数toggleCollapse（）{
const isCollapsed=getCollapsed（）；
如果（已合并）{
setItem（'collapsed'，'uncollapsed'）；
}否则{
setItem（'collapsed'，'collapsed'）；
}
getStatus（）；
}
切换折叠
由于看起来您正在使用引导，我将在几分钟内用引导折叠示例更新此示例。非常感谢！我将您的代码包括在我的代码中，只是将id从“result”调整为“collapseExample”。提交表单时会使用onclick=“toggleCollapse（）”函数。但它仍然不起作用。。。你知道哪里出了问题吗？非常感谢@alipfi：我将使用Bootstrap4中的默认启动器和它们的第一个折叠组件示例编辑这个答案。这个应该更有用。我将把第一个问题放在文章的底部，但它们实际上是两个独立的答案。你能帮我解决第二个问题吗？刷新页面时，我试图保存表单的checkboxstatus。我还没有找到一个合适的解决办法。。。提前感谢@alipfi：当你有机会了解它的工作原理时，一定要花点时间。那么你也可以帮助别人了。 
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
    <!-- jQuery -->
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script>
      $(function() {
        // store a reference to the collapse div so that 
        // we don't have to keep looking it up in the dom
        const collapseExample = $("#collapseExample");

        // register a callback function to the collapse div that
        // will be called every time the collapse is opened.
        collapseExample.on("shown.bs.collapse", function() {
            // since we know that that this function is called on
            // open, we'll set the localStorage value to "show" 
            localStorage.setItem("collapseExample", "show");
        });

        // register a callback function to the collapse div that
        // will be called every time the collapse is closed.
        collapseExample.on("hidden.bs.collapse", function() {
            // since we know that that this function is called on
            // open, we'll set the localStorage value to "hide" 
            localStorage.setItem("collapseExample", "hide");
        });

        // Since this function runs on page load (meaning only once), we can
        // check the value of localStorage from here and then call the
        // bootstrap collapse methods ourselves:

        // Check the value of the localStorage item
        const showExampleCollapse = localStorage.getItem("collapseExample");

        // Manipulate the collapse based on the value of the localStorage item.
        // Note that the value is determined by lines 36 or 44. If you change those,
        // then make sure to check that the comparison on the next line is still valid.
        if (showExampleCollapse === "show") {
            collapseExample.collapse("show");
        } else {
            collapseExample.collapse("hide");
        }
      });
    </script>
  </head>
  <body>
    <main>
      <p>
        <a
          class="btn btn-primary"
          data-toggle="collapse"
          href="#collapseExample"
          role="button"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          Link with href
        </a>
        <button
          class="btn btn-primary"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          Button with data-target
        </button>
      </p>
      <div class="collapse" id="collapseExample">
        <div class="card card-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
          labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </div>
    </main>

    <!-- Optional JavaScript -->
    <!-- Popper.js, then Bootstrap JS -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
  </body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    function getCollapsed() {
        const state = localStorage.getItem('collapsed');
        if(state === 'collapsed'){
            return true;
        }
        return false;
    }
    function getStatus(){
        const resultDiv = document.getElementById('result');
        const isCollapsed = getCollapsed();
        if(isCollapsed){
            resultDiv.innerHTML = "collapsed";
        }else{
            resultDiv.innerHTML = "un-collapsed";
        }
    }
    function toggleCollapse(){
        const isCollapsed = getCollapsed();
        if(isCollapsed){
            localStorage.setItem('collapsed', 'un-collapsed');
        }else{
            localStorage.setItem('collapsed', 'collapsed');
        }
        getStatus();
    }
    </script>
</head>
<body onload="getStatus()">
    <div>
        <button onclick="toggleCollapse()">Toggle Collapse</button>
    </div>
    <div id="result"></div>
</body>
</html>