details侧栏导航无法保持激活状态的根源在于其open状态不跨生命周期保存，页面刷新即重置；必须通过localStorage手动持久化每级data-id对应的展开状态，并用setAttribute/removeAttribute同步DOM。

details 侧栏导航无法保持激活状态的根源

直接用 details 做侧边栏导航时，页面刷新后所有菜单自动收起——这不是 bug，是它的设计逻辑：details 的 open 状态**不跨生命周期保存**，DOM 加载即重置为默认（关闭）。浏览器不会主动记住你上一秒点开了哪一级，更不会同步到其他标签页。

用 localStorage 持久化每级 details 的 open 状态

必须手动存取每项的展开状态，关键是给每个 details 标记唯一 ID，并绑定 toggle 事件监听：

• details 元素需带 data-id 属性，例如 <details data-id="nav-settings"></details>
• 加载时读 localStorage.getItem('details_nav-settings_open')，值为 'true' 就 setAttribute('open', '')，否则 removeAttribute('open')
• 监听 toggle 事件，用 details.hasAttribute('open') 判定当前真实状态（别用 details.open，它不可靠）
• 存值时必须转成字符串：localStorage.setItem(key, String(isOpen))

嵌套 details 的状态隔离与样式污染风险

多级菜单里，子 details 的状态不能靠父级 open 推导——它们彼此独立。常见错误是只存最外层 ID，结果二级菜单点开后刷新就丢了：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 每一层 details 都要单独设 data-id，比如 data-id="nav-api" 和 data-id="nav-api-auth"
• CSS 选择器必须加层级限定，例如 details[open] details[open] 表示两级都展开，避免写成 details[open] details 导致误匹配
• summary::marker 在嵌套时样式不继承，子级需显式重置：details details summary::marker { content: "▶"; }
• 移动端点击热区不足？给所有 summary 加 min-height: 44px 和 padding，否则 Safari 下容易点不中

跨页面/多标签页同步需要 storage 事件监听

用户在标签页 A 改了菜单状态，标签页 B 不会自动更新——得靠 storage 事件手动触发重载：

立即学习“前端免费学习笔记（深入）”；

• 在页面初始化后加 window.addEventListener('storage', handleStorageChange)
• handleStorageChange 函数里，检查 event.key 是否匹配 details_.*_open 格式，再定位对应 details 元素并同步 open 属性
• 注意：Safari 私密模式下 localStorage 可能抛错，需包 try/catch
• 登录用户若需服务端同步，应把状态存在后端 API，前端仅作降级使用 localStorage

细节决定成败：很多人只存了状态却忘了清空无效 key，或在嵌套结构里漏写了 data-id，导致某级菜单永远无法恢复。真正可靠的方案不是“存一次”，而是每次 DOM 加载、每次 storage 变更、每次用户操作，都确保状态与 UI 严格对齐。