最适存储字符串"true"/"false"并用唯一key（如data-key）标识，初始化先读存值再设class防冲突，toggle后更新localStorage，iOS需用max-height替代height。
折叠状态用 localStorage 存什么最合适
存布尔值或字符串都行，但别存 DOM 节点或 jQuery 对象——它们序列化后是空对象，读出来永远 false。推荐统一存字符串 "true" / "false"，避免 JSON 解析时类型错乱。
关键是要为每个可折叠区域设唯一标识，比如用元素的 id 或 data-key 属性。没有 id？那就用它在页面中的位置索引（Array.from(document.querySelectorAll('.collapsible')).indexOf(el)），但稳定性差，仅作备用。
- ✅ 推荐：
<div class="collapsible" data-key="faq-1"> → 存键 <code>"collapsible-faq-1" - ⚠️ 避免：
localStorage.setItem('isExpanded', el.classList.contains('expanded'))—— 没有上下文，多个折叠区会互相覆盖 - ⚠️ 避免直接存
el.style.height或内联样式，不可靠且难还原 - ✅ 正确顺序：
const saved = localStorage.getItem(key); if (saved === 'true') el.classList.add('expanded');→ 然后才el.addEventListener('click', toggle) - ✅ 防闪动：初始化时给元素加
style="transition: none"，class 设置完再移除 - ❌ 错误写法：
el.classList.toggle('expanded')无条件执行 —— 覆盖了本地保存的状态 - ✅ 推荐写法：
function toggle() { const isExpanded = el.classList.contains('expanded'); el.classList.toggle('expanded'); localStorage.setItem(key, String(!isExpanded)); } - ✅ 跨页同步（可选）：
window.addEventListener('storage', e => { if (e.key === key) { /* 刷新当前元素状态 */ } }); - ⚠️ 注意：Safari 无痕模式下
localStorage会抛QuotaExceededError，建议包一层 try/catch - ✅ 必做：
.collapsible { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }+ 展开时设max-height: 500px - ✅ 安全兜底：
if (typeof localStorage !== 'undefined') { /* 使用 */ }，防止禁用或异常环境崩溃 - ⚠️ 不要依赖
getComputedStyle(el).height来判断状态 —— 返回"auto"无法比较，一律以 class 为准
初始化时怎么正确还原展开状态
不能等 DOMContentLoaded 后再操作 DOM 再读取 localStorage —— 用户可能已手动点击过，导致状态冲突。应该先读取本地值，再设置初始 class 和样式，最后绑定事件。
特别注意：CSS 过渡动画（transition: height 0.3s）和 height: 0 / height: auto 的组合，在初始化时容易闪动或失效。稳妥做法是先设 height: 0 或 overflow: hidden，再根据存储值同步加 class，并跳过首次动画。
立即学习“前端免费学习笔记（深入）”；
toggle 函数里怎么同步更新 localStorage
不是所有点击都要写入 storage —— 比如用户快速连点两次，只应记录最终状态。所以写入时机必须放在状态确定之后，而不是点击瞬间。
另外，localStorage.setItem() 是同步阻塞操作，但在折叠/展开这种低频交互里影响微乎其微；真正要防的是跨标签页冲突：A 标签页改了状态，B 标签页没响应。可以用 storage 事件监听，但仅用于被动同步，不要依赖它来驱动主逻辑。
移动端 Safari 和 iOS WebView 的兼容细节
iOS 15+ 的 Safari 对 localStorage 在非用户手势触发的 JS 中限制变严，但折叠展开属于明确的 click/tap，不受影响。真正的问题是：iOS 上 height: auto 动画不工作，必须用 max-height 替代，且需预估足够大的值（比如 max-height: 500px），否则收起时会“抽搐”。
另一个坑是，微信内置 WebView（X5 内核）对 storage 事件支持不全，监听基本无效，只能靠定时轮询或放弃跨页同步。
实际最易被忽略的是「多个折叠区共用同一份逻辑时，key 生成规则是否真唯一」。一个拼错的 data-key 或漏掉的命名空间，就会让几个模块的状态互相污染，查起来极费时间。
