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

Question

我使用materializecss 框架制作了前端（HTML）。我正在使用他们的Collapsible 元素，单击时会展开。

在某些元素中是表单，提交后会触发网页的刷新。页面重新加载后，可折叠元素全部折叠。此外，当用户离开页面然后返回时，所有元素都会折叠。

我正在尝试找到一种方法来“记住”哪个元素是打开的。我在想最好将当前打开的元素存储在本地内存中，然后在重新加载时使用访问权限，然后使用他们的 .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>

Answer 1

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

Answer 2

尝试将数据写入本地存储，然后在页面加载时读取它。

静态数据

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