Laravel 9页面刷新/CRUD操作后保持嵌套表格展开状态的方案

不用重构现有CRUD逻辑，借助浏览器本地存储就能实现需求，具体步骤如下：

1. 修改按钮点击事件，记录展开状态 #

更新按钮的点击逻辑，在切换表格显示状态时，将展开的表格索引存入localStorage：

<button
  type="button"
  class="btn btn-warning"
  id="hidden{{ $buttonIndex }}"
  onclick="
    const tableIndex = '{{ $buttonIndex }}';
    const tableSelector = '.items' + tableIndex;
    const buttonSelector = '#hidden' + tableIndex;
    
    $(tableSelector).slideToggle(function() {
      const isVisible = $(this).is(':visible');
      // 更新按钮文字
      $(buttonSelector).html(isVisible ? 'Roll' : 'Rollout');
      
      // 读取当前已展开的表格索引列表
      let expandedTables = JSON.parse(localStorage.getItem('expandedTables')) || [];
      if (isVisible) {
        // 展开时添加索引，避免重复存储
        if (!expandedTables.includes(tableIndex)) {
          expandedTables.push(tableIndex);
        }
      } else {
        // 收起时移除对应索引
        expandedTables = expandedTables.filter(index => index !== tableIndex);
      }
      // 将更新后的列表存回localStorage
      localStorage.setItem('expandedTables', JSON.stringify(expandedTables));
    });"
>Rollout</button>

2. 页面加载时自动恢复展开状态 #

在页面底部（或布局文件的脚本区域）添加初始化脚本，页面加载完成后读取localStorage记录，自动展开对应表格并更新按钮文字：

<script>
$(document).ready(function() {
  const expandedTables = JSON.parse(localStorage.getItem('expandedTables')) || [];
  expandedTables.forEach(index => {
    const tableSelector = '.items' + index;
    const buttonSelector = '#hidden' + index;
    // 展开目标表格
    $(tableSelector).show();
    // 切换按钮显示文字
    $(buttonSelector).html('Roll');
  });
});
</script>

补充说明 #

• 如果希望状态仅在当前浏览器会话有效，把localStorage换成sessionStorage即可，用法完全一致。
• 确保循环中的$buttonIndex值唯一，避免不同表格的状态互相干扰。
• 表单提交后的页面跳转、刷新操作都不会影响localStorage中的数据，能稳定恢复展开状态。

内容的提问来源于stack exchange，提问作者Quiet Molly