如何在多个HTML页面间共享元素的切换类状态？

要实现跨页面保留折叠元素的展开/收起状态，最直接的方案是用浏览器的localStorage本地存储——它能在同域名下的所有页面共享数据，完全满足你的需求。结合你的现有代码，具体修改如下：

步骤1：给每个折叠元素添加唯一标识 #

首先要给每个.collapsible元素加上唯一的data-id属性，这样才能区分每个元素的状态：

<div class="collapsible" data-id="0">0</div>
<div class="collapsible" data-id="1">1</div>
<div class="collapsible" data-id="2">2</div>

步骤2：修改JavaScript逻辑，实现状态保存与恢复 #

修改原有JS代码，加入localStorage的读写逻辑：

const collapsibles = document.querySelectorAll(".collapsible");
const STORAGE_KEY = "collapsibleStates";

// 页面加载时恢复状态
function restoreStates() {
  const savedStates = localStorage.getItem(STORAGE_KEY);
  if (!savedStates) return;
  
  const states = JSON.parse(savedStates);
  collapsibles.forEach(item => {
    const id = item.dataset.id;
    if (states[id]) {
      item.classList.add("collapsible--expanded");
    } else {
      item.classList.remove("collapsible--expanded");
    }
  });
}

// 保存当前所有折叠元素的状态到localStorage
function saveStates() {
  const states = {};
  collapsibles.forEach(item => {
    const id = item.dataset.id;
    states[id] = item.classList.contains("collapsible--expanded");
  });
  localStorage.setItem(STORAGE_KEY, JSON.stringify(states));
}

// 初始化：绑定点击事件+恢复状态
collapsibles.forEach((item) => {
  item.addEventListener("click", function() {
    this.classList.toggle("collapsible--expanded");
    saveStates(); // 点击后立即保存状态
  });
});

// 页面加载完成后恢复状态
window.addEventListener("DOMContentLoaded", restoreStates);

步骤3：CSS保持不变 #

原有CSS无需修改，继续使用：

.collapsible {
  width: 100px;
  height: 20px;
  border: solid 2px black;
  background: yellow;
  margin: 2px;
}

.collapsible--expanded {
  height: 40px;
  background: pink;
}

原理说明 #

• localStorage会把数据持久化存储在浏览器中，除非用户手动清除或代码删除，否则不会丢失；
• 每次点击元素切换状态后，都会把所有折叠元素的状态打包成JSON字符串存入localStorage；
• 新页面加载时，会读取localStorage里的保存数据，对应恢复每个元素的展开/收起状态。

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