Как я могу использовать локальное хранилище для поддержания состояния выпадающего меню?

Question

Я пытаюсь создать простое меню, чтобы оно расширялось вниз, а затем при перезагрузке оставляло его расширенным / закрытым, в зависимости от того, что было у пользователя до перезагрузки.Я знаю, что есть функция html localstorage для javascript, но я не уверен, что это может быть реализовано в моем коде.Излишне говорить, что я очень плохо знаком с 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();

Если у вас есть дополнительные вопросы, задайте их в комментарии, я буду рад помочь вам.