我试图让用户的浏览器“记住”他们上次访问页面时打开了可折叠菜单的哪个部分，然后重新打开它

Question

I made the front end (HTML) using materializecss framework. I am using their Collapsible elements that expand when clicked.

Within some of the elements are forms which, after submission, trigger a refresh of the web page. Once the page reloads, the collapsible elements are all collapsed. Also, when the user navigates away from the page and then returns, all elements are collapsed.

I'm trying to find a way to 'remember' which element was open. I was thinking it was best to store the currently opened element in local memory and then use access that when it reloads and then use their.open() method....but I can't figure out how to do this on local storage.

EDIT:

adding my current attempt at using local storage

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>

Answer 1

The argument to onOpenStart has to be a function to call. Otherwise you're calling it when you initialize the accordion, not when the event occurs. Also, you were using the undefined variable n in the call.

Use .index() to get the position of the element being opened.

$(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)
    }
})

Answer 2

Try write data to localstorage and then when page is loaded read it.

Static data

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

Main logic

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);
    }
}

Initialize

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

$(document).ready(onDocReady);