Javascript I'；我正在尝试获取用户'；s浏览器到"；记住；可折叠菜单的哪一部分在他们最后一次访问页面并重新打开时是打开的

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

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

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

功能激活（n）{
//打开可折叠元素，选项卡#是传入的变量
$（“.collapsable”）.open（n）
}
函数storeElem（n）{
window.localStorage.setItem（'openElem'，n）
}
$（文档）.ready（函数（）{
var instance=M.collapsable.init（elem{
手风琴：错，
onOpenStart:storeElem（n）
});
var previousElem=window.localStorage.getItem（'openElem'））
如果（上一个元素）{
激活（上一个元素）
}
})

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

静态数据

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

---

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

---

localStorage

是正确的方法。显示您尝试过的内容。编辑帖子以添加我当前的尝试。他有多个手风琴，他需要知道哪个手风琴打开。更新了多个可折叠元素的帖子我尝试过这一点，并在上面添加了几个不同的变体，但没有成功。看起来onOpenStart功能未运行。我添加了一个console.log（'string'），但它没有执行。手风琴：假的也不行。我已经检查了语法错误/拼写错误，完全删除了我的并粘贴了你的版本。其中的要点是，我试图浏览materialize的文档，但很难找到答案；可能应该选择一个不同的框架，因为我不是很有经验。