可通过监听折叠面板事件并用 localStorage 持久化状态，为每个面板设置唯一 data-panel-id 标识，点击时存布尔值，加载时读取并还原 open 类。
可以通过监听折叠面板的展开/收起事件，将用户操作实时存入 localStorage，页面加载时再读取并还原状态。关键在于为每个面板设置唯一标识（如 ID 或 data 属性），避免状态混淆。
为每个折叠面板添加唯一标识
确保每个可折叠区域有稳定、可识别的 key，推荐使用 data-panel-id 或直接用元素 id：
<div class="accordion-item" data-panel-id="user-settings"> <button class="accordion-header">用户设置</button> <div class="accordion-body">...</div> </div> <div class="accordion-item" data-panel-id="notifications"> <button class="accordion-header">通知偏好</button> <div class="accordion-body">...</div> </div>
保存展开状态到 localStorage
点击标题时，记录该面板当前是展开还是收起。建议统一用布尔值 true（展开） / false（收起）存储：
- 获取面板的
data-panel-id - 判断其内容区是否可见（例如检查
classList.contains('open')或style.maxHeight） - 用
localStorage.setItem(key, JSON.stringify(isOpen))存储
页面加载时恢复状态
在 DOM 加载完成后遍历所有面板，读取对应 key 的存储值，并应用初始状态：
立即学习“前端免费学习笔记（深入）”；
- 用
localStorage.getItem(panelId)获取原始字符串 - 用
JSON.parse()转回布尔值（注意处理null或解析失败） - 若为
true，给面板添加open类或设置max-height，触发展开动画
完整示例逻辑（不依赖框架）
简化的 JS 片段供参考：
document.addEventListener('DOMContentLoaded', () => {
const panels = document.querySelectorAll('[data-panel-id]');
panels.forEach(panel => {
const id = panel.dataset.panelId;
const header = panel.querySelector('.accordion-header');
const body = panel.querySelector('.accordion-body');
// 恢复状态
const saved = localStorage.getItem(`panel_${id}`);
if (saved !== null) {
const isOpen = JSON.parse(saved);
if (isOpen) panel.classList.add('open');
}
// 绑定点击
header.addEventListener('click', () => {
const isNowOpen = panel.classList.toggle('open');
localStorage.setItem(`panel_${id}`, JSON.stringify(isNowOpen));
});
});
});
注意 key 命名要有区分度（如加前缀 panel_），避免与其他存储项冲突；同时建议在用户登出或重置偏好时主动清理对应 key。
