javascript - 如何使用本地存储来维护下拉菜单状态？

Question

我正在尝试制作一个简单的菜单并让它向下展开，然后在重新加载时保持展开/关闭状态，具体取决于用户在重新加载之前的内容。我知道有一个用于 javascript 的 html localstorage 函数，但我不确定这是否可以在我的代码中实现。不用说，我对 Javascript 特别陌生。

这是我的代码，

<p class="portfolio_menuOpt collapsible">
Series 
</p>
<div class="sub_menu_collapsible">
<p class="portfolio_menuOpt_Sub">
        Feral - Mustang 69' 
    </p>
    <p class="portfolio_menuOpt_Sub ">
        Mnemosyne - Morris Minor 1000
    </p>
</div> 

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

我怎样才能做到这一点？我是否可以在一段时间后清空这个本地存储(并确保一次只能使用一个可折叠的东西？)。非常感谢您的帮助。

Answer 1

您只需在单击下拉菜单时更改本地存储中的变量。在每次重新加载页面结束后从本地存储获取此变量以了解下拉列表是否应该打开或关闭。

这是更改/设置本地存储变量的代码:

localStorage.setItem('dropdownToggle', 'true');

这是获取本地存储变量的代码:

localStorage.getItem('dropdownToggle');

您还可以设置超时，然后从本地存储中删除变量:

localStorage.removeItem('dropdownToggle');

或者只是把它全部清理干净

localStorage.clear();

如果您还有其他问题，请在评论中提出，我很乐意为您提供帮助。