details标签的open状态不会自动保存，因其仅为反映初始渲染态的dom布尔属性，不绑定localstorage或url hash，刷新后必回归html声明的初始值。
details 标签本身不持久化交互状态——刷新页面后必然重置为初始值（有 open 属性则展开，否则收起）。它没有浏览器级记忆机制，也不自动读写 localStorage 或 URL hash。
为什么 details 的 open 状态不会自动保存
原生 details 的 open 属性是纯 DOM 属性，仅反映当前渲染态，不与任何存储介质绑定。用户点击触发的是浏览器内置的布尔切换逻辑，不触发事件监听以外的副作用。
- 刷新、前进/后退、硬重载都会丢弃当前
open值，回归 HTML 中声明的初始态 - 服务端渲染（SSR）或静态生成时，
open只能靠服务端逻辑预判插入，无法响应客户端历史操作 - 即使监听了
toggle事件，也只获知“此刻变了”，不自动帮你存、也不自动还原
用 toggle 事件 + localStorage 手动持久化
最轻量可控的方式：在 toggle 触发时同步写入 localStorage，并在页面加载时读取并设置 open 属性。
- 必须在 DOM 加载完成（
DOMContentLoaded）后读取并应用，否则会因 HTML 初始态覆盖而失效 - 每个
details应有唯一标识（如id或data-persist-key），避免多个面板互相干扰 - 不要直接用
el.open = true赋值后立即触发toggle事件——这会引发重复回调，建议用el.toggleAttribute('open', shouldOpen)
示例逻辑：
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('details[data-persist]').forEach(el => {
const key = el.dataset.persist;
const saved = localStorage.getItem(key) === 'true';
el.toggleAttribute('open', saved);
el.addEventListener('toggle', () => {
localStorage.setItem(key, el.open.toString());
});
});
});
URL hash 同步方案适合单面板或 FAQ 场景
若页面只有一个关键折叠区（如文档目录、FAQ 条目），可用 URL hash 控制状态，天然支持前进/后退和分享链接。
- 监听
hashchange，匹配#section-1这类 hash 值，找到对应details[id="section-1"]并设open - 点击
summary时，用history.replaceState()更新 hash，避免新增浏览记录 - 注意：不能依赖
location.hash初始化，因为首次加载时 hash 可能为空，需 fallback 到open属性
容易被忽略的兼容性与边界问题
持久化不是加几行 JS 就完事，这些点常导致行为异常：
- Safari 对
toggle事件触发时机较敏感，尤其在 Shadow DOM 或动态插入的details中，建议加setTimeout(..., 0)延迟读写 - 使用
localStorage时，若用户禁用或配额满，setItem会抛QuotaExceededError，需 try/catch - 服务端渲染框架（如 Next.js、Nuxt）中，hydration 阶段 DOM 和 JS 状态不一致，可能导致闪屏——必须在客户端首次渲染后才应用持久化值
- 不要给多个
details共用同一个 storage key，也不要靠索引（如details[0]）定位，DOM 顺序变动即失效
真正可靠的持久化，永远取决于你如何绑定标识、何时读写、以及是否兜底处理失败路径——details 只负责开关，不负责记账。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
