如何在刷新时保持div手风琴折叠状态

Question

我正在使用Spring Boot，MVC，Thymeleaf模板和Bootstrap 4构建一个代表组织内部员工技能的系统。

在收到请求后，控制器会将地图添加到模型中，以表示按类别组织的不同技能。因此，例如，元素1可能是键“ Java”，而值将是Java相关技能的列表-JPA，JMS，微服务等。

然后，视图会检索地图，并针对每个元素构造一个div，其中包含一个表格，以按类别显示技能详细信息。我使用了数据切换和折叠来产生手风琴效果，允许每个div通过单击按钮折叠/恢复。效果很好。

<div th:each="element : ${skillsMap}" class="table-responsive">
        <button type="button" class="navbar-toggle btn-block collapsed font-weight-bold" data-toggle="collapse"
                    th:attr="data-target='#skills_'+${element.key}"
                    th:text="${categoriesMap.get(element.key)}"></button>
        <div class="collapse" th:attr="id='skills_'+${element.key}">...</div>
...
</div>

用户可以执行诸如向类别添加技能的动作。这会向控制器发布一个请求，并刷新视图。问题在于，刷新后，div的折叠状态会丢失，并且它们都再次出现折叠。理想情况下，在刷新页面以优化用户体验之后，我想保持div的折叠状态。

我对此进行了一些研究，可以看到各种可能的方法，例如使用LocalStorage或Cookies来保持刷新之间的div状态。但是由于我主要是后端开发人员并且是UI的新手，所以我有些畏缩，无法确定这是在Bootstrap 4中使用的推荐方法，并且不确定在我见过的JavaScript代码片段中应该从哪里开始。因此，非常感谢任何指针或示例！非常感谢您考虑我的帖子。