必须用 localstorage 存储并 setattribute('open', '') 同步 html 属性，因为 el.open = true 仅修改 js 反射属性，不更新 html 属性，导致 css details[open] 不生效、屏幕阅读器无法识别；恢复时需用 hasattribute('open') 判定真实状态。
页面刷新后保持 details 展开状态，必须用 localStorage 存储并手动同步 DOM 属性，不能依赖 el.open = true 赋值 —— 因为它不触发 HTML 属性更新，CSS 和渲染层都看不到变化。
为什么直接写 el.open = true 无法持久化
DOM 元素的 open 属性是反射属性（reflected property），读写它只影响 JS 层状态，不会自动写回 HTML 属性。而浏览器渲染、CSS 选择器（如 details[open]）和可访问性行为，全部依赖 HTML 属性是否存在。所以：
-
el.open = true→ JS 里值变了，但el.hasAttribute('open')仍为false，details[open]样式不生效 -
el.setAttribute('open', '')→ HTML 属性被写入，渲染立刻响应，CSS 生效，屏幕阅读器识别为已展开 - 刷新后，所有 JS 状态清空，只有 HTML 属性和
localStorage是持久的
正确保存与恢复的 JS 写法（含 data-id 隔离）
每个 details 应有唯一标识（如 data-id），避免多个面板互相干扰：
document.querySelectorAll('details[data-id]').forEach(details => {
const id = details.dataset.id;
const key = `details_${id}_open`;
const saved = localStorage.getItem(key);
// 恢复：有记录就 setAttribute('open', '')，否则 removeAttribute
if (saved === 'true') {
details.setAttribute('open', '');
} else {
details.removeAttribute('open');
}
// 保存：监听 toggle，用 hasAttribute 判定当前是否“在 HTML 中存在 open”
details.addEventListener('toggle', () => {
const isOpen = details.hasAttribute('open');
localStorage.setItem(key, String(isOpen));
});
});
注意：这里必须用 hasAttribute('open')，不是 details.open —— 前者反映 HTML 层真实状态，后者只是 JS 缓存值，两者在动态操作后可能不一致。
使用固定的 Next.js/Tailwind/Prisma 技术栈构建并记录独立 SaaS 项目，仅将 FastAPI 用于 Python 工作负载，并遵循严格的架构规范。
CSS 动画与过渡要配合 details[open] 选择器
想加展开收起动画（比如 max-height 过渡），样式必须基于属性选择器，不能靠 class：
details .content {
overflow: hidden;
transition: max-height 0.3s ease;
}
details[open] .content {
max-height: 200px;
}
details:not([open]) .content {
max-height: 0;
}
如果用 JS 加 class 来控制，会绕过原生语义，导致键盘操作（空格/回车）或屏幕阅读器无法同步状态；且 details[open] 是零延迟响应，比 class 切换更可靠。
真正容易被忽略的是：同一元素上，el.open（JS 属性）、el.hasAttribute('open')（HTML 属性）、details[open]（CSS 选择器）三者感知状态的机制完全不同。混用时只要错一步，比如用 el.open = true 代替 setAttribute，整个持久化链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
