如何将点击事件状态存储到Local Storage，实现页面刷新后复用

要让点击触发的元素状态在页面刷新后保留，核心思路是把激活状态的标识存在LocalStorage中，页面加载时再读取并恢复状态。下面是针对你提供的代码改造后的完整方案：

1. 修正HTML结构（添加唯一标识） #

给每个手风琴项加上唯一的data-id属性，方便后续区分不同项的状态：

<div class="filter">
  <ul>
    <li data-id="accordion-1">
      <h4 class="accordion-header">Accordion</h4>
      <p>Hello,world</p>
    </li>
    <li data-id="accordion-2">
      <h4 class="accordion-header">Accordion 2</h4>
      <p>Another content</p>
    </li>
  </ul>
</div>

2. 改造JavaScript逻辑（状态存储与恢复） #

// 定义LocalStorage的存储键名
const STORAGE_KEY = 'activeAccordions';
const container = document.querySelector('.filter ul');

// 页面初始化时恢复之前的激活状态
function restoreActiveState() {
  // 从LocalStorage读取数据，无数据则用空数组
  const activeIds = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
  activeIds.forEach(id => {
    const header = document.querySelector(`[data-id="${id}"] .accordion-header`);
    if (header) {
      header.classList.add('active');
      header.nextElementSibling.classList.add('active');
    }
  });
}

// 更新LocalStorage中的激活状态列表
function updateStorage(activeIds) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(activeIds));
}

// 点击事件处理逻辑
container.addEventListener('click', (event) => {
  const closestHeader = event.target.closest('.accordion-header');
  if (!closestHeader) return;
  
  // 获取当前手风琴项的唯一ID
  const accordionItem = closestHeader.closest('li');
  const itemId = accordionItem.dataset.id;
  
  // 切换元素的active状态
  const isActive = closestHeader.classList.toggle('active');
  closestHeader.nextElementSibling.classList.toggle('active');
  
  // 更新LocalStorage中的激活ID列表
  let activeIds = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
  if (isActive) {
    // 激活时添加ID（避免重复添加）
    if (!activeIds.includes(itemId)) {
      activeIds.push(itemId);
    }
  } else {
    // 取消激活时移除ID
    activeIds = activeIds.filter(id => id !== itemId);
  }
  updateStorage(activeIds);
});

// 页面加载完成后立即恢复状态
document.addEventListener('DOMContentLoaded', restoreActiveState);

关键逻辑说明 #

• 唯一标识：data-id确保每个手风琴项都有独立标识，避免状态混淆。
• 状态恢复：页面加载时从LocalStorage读取存储的激活ID，找到对应元素并还原active类。
• 状态更新：点击时切换元素状态，同步更新LocalStorage中的ID列表——激活则加入列表，取消则移除。
• LocalStorage适配：用JSON.parse/JSON.stringify处理数组，因为LocalStorage仅支持字符串存储。

内容的提问来源于stack exchange，提问作者rocky