本文介绍使用 localstorage 持久化嵌套表格（如“人员-宠物”层级结构）的显示状态，确保用户手动展开的子表在页面重载后仍保持可见，避免重复操作。
本文介绍使用 localstorage 持久化嵌套表格（如“人员-宠物”层级结构）的显示状态，确保用户手动展开的子表在页面重载后仍保持可见，避免重复操作。
在构建具有层级关系的数据展示界面（例如主表为人员列表、点击某行后动态展开其关联的宠物子表）时，仅靠 JavaScript 的 display 切换无法跨页面生命周期保存状态。刷新后所有子表默认隐藏（style="display: none"），用户体验割裂。解决方案是将用户的交互意图——即“该子表当前应为展开状态”——持久化到浏览器本地存储中。
✅ 核心思路：用 localStorage 记录“已展开”的表格 ID
localStorage 是 Web API 提供的键值对持久化存储机制，数据在同源下长期保留（除非手动清除），且不随页面刷新丢失。我们可约定：
- 键（key）：子表格的唯一 id（与 PHP 动态生成的 id 一致，如 "person_123"）；
- 值（value）：存在即表示“应显示”，无需存具体值；或统一存 '1' 增强语义清晰度。
? 实现步骤
1. 修改切换函数：同步更新 localStorage
将原 toggletable(id) 函数升级为状态感知版本：
function toggletable(id) {
const table = document.getElementById(id);
if (!table) return;
if (table.style.display === "table") {
// 当前显示 → 隐藏，并从 localStorage 移除记录
table.style.display = "none";
localStorage.removeItem(id);
} else {
// 当前隐藏 → 显示，并写入 localStorage
table.style.display = "table";
localStorage.setItem(id, '1');
}
}✅ 注意：避免直接依赖 tableid.style.display 的初始空字符串（""）判断，因内联样式未设置时返回空字符串而非 "none"。此处采用显式对比 "table" 更可靠。
2. 页面加载时恢复状态
在 DOM 加载完成后（推荐使用 DOMContentLoaded 事件），遍历所有子表格，检查其 ID 是否存在于 localStorage 中，若存在则设为 display: table：
document.addEventListener('DOMContentLoaded', function() {
// 获取所有可能的子表格（建议添加特定 class 如 'nested-table' 便于筛选）
const nestedTables = document.querySelectorAll('table[id^="person_"], table[id^="user_"]'); // 根据实际 id 前缀调整
nestedTables.forEach(table => {
if (localStorage.getItem(table.id)) {
table.style.display = "table";
}
});
});? 提示：若子表格数量庞大，可考虑只恢复当前视口内或最近操作过的表格，但对一般业务场景，全量检查简洁高效。
3. 修正 HTML 模板中的按钮与表格结构
确保 PHP 渲染逻辑正确输出 id，并移除内联 style="display: none"（交由 JS 统一控制初始状态）：
<!-- 按钮 -->
<button
class="button-sma"
onclick="toggletable('<?php echo $data->get('id'); ?>')">
Show pets
</button>
<!-- 子表格（无内联 display，初始由 JS 控制） -->
<table id="<?php echo $data->get('id'); ?>" class="nested-table">
<!-- 宠物数据 -->
</table>⚠️ 注意事项与最佳实践
- ID 唯一性保障：确保每个子表格 id 全局唯一（如 person_101, person_102），避免 localStorage 键冲突。
- 存储容量限制：localStorage 单域约 5–10 MB，仅存 ID 字符串完全无压力；但若需存储复杂状态（如展开深度、排序），应评估是否需迁移到 IndexedDB。
- 隐私模式兼容性：部分浏览器在无痕模式下禁用 localStorage，此时降级为默认隐藏即可（不影响功能可用性）。
- 服务端协同（进阶）：若用户状态需跨设备同步，应将展开偏好提交至后端并绑定用户会话，localStorage 仅作前端临时缓存。
✅ 总结
通过 localStorage.setItem() 和 localStorage.getItem() 配合 DOM 操作，即可轻量、可靠地实现表格展开状态的跨刷新持久化。该方案零依赖、兼容性好（IE8+）、逻辑清晰，是前端状态管理的经典实践。关键在于将“用户操作”与“存储写入”严格绑定，并在页面初始化阶段完成状态回填——让交互体验真正无缝延续。
