Я пытаюсь заставить браузер пользователя "запомнить", какая часть складного меню была открыта при последнем посещении страницы, а затем снова открыть ее

ProgramBox

Я пытаюсь заставить браузер пользователя «запомнить», какая часть складного меню была открыта при последнем посещении страницы, а затем снова открыть ее

Post author:admin
Запись опубликована:19 января, 2022
Post category:Вопросы по программированию

#javascript #html #materialize

Вопрос:

Я создал интерфейс (HTML), используя платформу materializecss. Я использую их складные элементы, которые расширяются при нажатии.

В некоторых элементах находятся формы, которые после отправки запускают обновление веб-страницы. Как только страница перезагрузится, все складные элементы будут свернуты. Кроме того, когда пользователь переходит со страницы, а затем возвращается, все элементы сворачиваются.

Я пытаюсь найти способ «вспомнить», какой элемент был открыт. Я думал, что лучше всего сохранить текущий открытый элемент в локальной памяти, а затем использовать доступ, когда он перезагрузится, а затем использовать их метод .open ()…. но я не могу понять, как это сделать в локальном хранилище.

Редактировать:

добавление моей текущей попытки использовать локальное хранилище

HTML

 
  <ul class="collapsible">
    <li>
      <div class="collapsible-header">first tab header</div>
      <div class="collapsible-body"><span>first tab body</span></div>
    </li>
    <li>
      <div class="collapsible-header">second tab header</div>
      <div class="collapsible-body"><span>second tab body</span></div>
    </li>
  </ul>

язык JavaScript

 <script>

function activate(n){
  //open collapsible element, the tab # being the variable passed in
  $(".collapsible").open(n)
}
function storeElem(n){
  window.localStorage.setItem('openElem', n)
}

$(document).ready(function(){    
    var instance = M.Collapsible.init(elem, {
      accordion: false,
      onOpenStart: storeElem(n)
    });
    var previousElem = window.localStorage.getItem('openElem')
    if (previousElem) {
      activate(previousElem)
    }
})
</script>

Ответ №1:

Аргумент to onOpenStart должен быть функцией для вызова. В противном случае вы вызываете его при инициализации аккордеона, а не при возникновении события. Кроме того, вы использовали неопределенную переменную n в вызове.

Используется .index() для определения положения открываемого элемента.

 $(document).ready(function(){    
    var instance = M.Collapsible.init(elem, {
      accordion: false,
      onOpenStart: function(li) {
        storeElem($(li).index());
      }
    });
    var previousElem = window.localStorage.getItem('openElem')
    if (previousElem) {
      activate(previousElem)
    }
})

1. Я попробовал это, а также поставил несколько разных вариантов, и ничего не вышло. Похоже, функция onOpenStart не работает. Я добавил console.log («строка»), и он не выполняется. Аккордеонист:ложь тоже не работает. Я проверил синтаксические ошибки/опечатки, полностью удалил свои и вставил вашу версию. Суть в том, что я пытаюсь просмотреть документацию materialize, но мне трудно найти ответ; вероятно, следовало бы выбрать другую структуру, так как у меня не очень большой опыт.

Ответ №2:

Попробуйте записать данные в localstorage, а затем, когда страница будет загружена, прочитайте ее.

Статические данные

  const LOCALSTORAGE = {
        COLLAPSED_INDEX: 'project-name-is-collapsed-state',
    };

Основная логика

 class Collapsible {
    _instance = null;

    // ---> Getters
    _getLocalIndex() {
        const collapsedIndex = localStorage.getItem(LOCALSTORAGE.COLLAPSED_INDEX);
        return collapsedIndex;
    }

    // ---> Setters
    _setLocalIndexByElement(element) {
        const index = $(element).index();
        this._setLocalIndex(index);
    }
    
    _setLocalIndex(index) {
        localStorage.setItem(LOCALSTORAGE.COLLAPSED_INDEX, index);
    }

    // ---> Events
    _onOpenStart(element) {
        this._setLocalIndexByElement(element);
    }

    // ---> Actions
    init() {
        this._setupInstance();
        this._setupActiveTab();
    }

    _setupInstance() {
        this._instance = M.Collapsible.init(elem, {
            accordion: false,
            onOpenStart: this._onOpenStart,
        });
    }

    _setupActiveTab() {
        const index = this._getLocalIndex();

        if (index === undefined) {
            return;
        }

        this._openByIndex(index);
    }

    _openByIndex(index) {
        if (this._instance === null) {
            return;
        }

        this._instance.open(index);
    }
}

Инициализировать

 function onDocReady() {
    const collapsible = new Collapsible();
    collapsible.init();
}

$(document).ready(onDocReady);