details.open = true不生效，因open是只读属性；须用setAttribute('open', '')展开、removeAttribute('open')收起，并通过data-id唯一标识+localStorage存取字符串'true'/'false'实现持久化。
刷新后 <details></details> 一定丢失展开状态，浏览器不保存它 —— 想持久化，必须用 localStorage 手动读写，且操作方式有严格限制。
为什么 details.open = true 不生效？
因为 open 是只读属性，赋值不会触发 DOM 渲染更新。它只是反映当前是否展开的“快照”，不是响应式数据源。
正确做法只有两个：
- 设展开：用
details.setAttribute('open', '')（值可为空字符串） - 收起：用
details.removeAttribute('open')
直接改 details.open = true 或 details.open = false 看似没报错，但页面不会变，屏幕阅读器也收不到状态变更。
立即学习“前端免费学习笔记（深入）”；
怎么在页面加载时还原上次状态？
不能靠 DOM 索引（比如第 0 个 <details></details>），因为 SSR、动态插入或组件重排会让索引漂移。必须用唯一标识符绑定状态。
推荐做法是给每个 <details></details> 加 data-id：
<details data-id="faq-1"><summary>Q1</summary><p>A1</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></details>
加载时读取 localStorage.getItem('details_faq-1_open')，再用 setAttribute 或 removeAttribute 设置对应状态。
注意：不要在 DOMContentLoaded 之前操作 DOM，否则元素还没挂载，querySelectorAll 找不到。
toggle 事件监听为什么比 click 更可靠？
toggle 是 <details></details> 原生事件，覆盖鼠标点击、空格键、回车键所有触发方式；而 click 会漏掉键盘操作，破坏无障碍体验。
监听时别用 details.open 判定当前状态 —— 它可能滞后于真实 DOM 状态。应该用：
-
details.hasAttribute('open')（准确反映渲染层） - 或者
getComputedStyle(details).getPropertyValue('display') !== 'none'（兜底）
保存逻辑要放在 toggle 回调里，且建议加防抖（尤其内容异步加载时），避免重复写入 localStorage。
多标签页之间状态不同步怎么办？
单靠 localStorage 写入不会自动广播到其他打开的同域页面。需要监听 storage 事件手动同步：
window.addEventListener('storage', (e) => {
if (e.key.startsWith('details_') && e.key.endsWith('_open')) {
const id = e.key.replace('details_', '').replace('_open', '');
const details = document.querySelector(`details[data-id="${id}"]`);
if (details) {
if (e.newValue === 'true') {
details.setAttribute('open', '');
} else {
details.removeAttribute('open');
}
}
}
});
这个监听必须在所有页面都注册，否则新打开的标签页加载时仍是旧状态。别忘了在页面卸载前清理事件（如 beforeunload），避免内存泄漏。
最常被忽略的是：localStorage 存的是字符串 'true' / 'false'，不是布尔值，比较时别写成 === true。
