页面跳转后如何保留按钮选中状态？LocalStorage实现方案咨询

原代码如下：

const buttons = document.querySelectorAll(".cardButton");
let favoritesCount = document.getElementById("favCount");
let currentCount = localStorage.getItem("currentCount") || 11;
localStorage.setItem("currentCount", currentCount);
favoritesCount.textContent = currentCount;

buttons.forEach(elem => {
    elem.addEventListener("click", () => {
        currentCount = localStorage.getItem("currentCount");
        if (elem.textContent == "В избранное") {
            elem.textContent = "В избранном";
            currentCount++;
            favoritesCount.textContent = currentCount;
            localStorage.setItem( "currentCount" , currentCount.toString());
        } else {
            elem.textContent = "В избранное";
            currentCount--;
            favoritesCount.textContent = currentCount;
            localStorage.setItem( "currentCount" , currentCount.toString());
        }
        elem.classList.toggle("button-blue");
        elem.classList.toggle("card-favorites-selected-button");
        localStorage.setItem(elem, elem.textContent);
        console.log(localStorage.getItem(elem));
        console.log(currentCount);
    })
});

原代码核心问题：用DOM元素作为localStorage的key会被自动转为[object HTMLButtonElement]，导致所有按钮共用同一个存储项，无法单独保存状态；同时页面加载时未读取并恢复每个按钮的状态。

以下是可行的实现方案：

方案一：为每个按钮添加唯一标识，单独存储状态 #

1. 给每个.cardButton按钮添加唯一data-id属性（如data-id="btn-1"），用于区分不同按钮
2. 页面加载时，遍历按钮，根据localStorage中对应标识的状态恢复文本和类名
3. 点击按钮时，用唯一标识作为key存储当前状态

修改后的代码：

const buttons = document.querySelectorAll(".cardButton");
let favoritesCount = document.getElementById("favCount");
// 确保计数为数字类型，避免字符串拼接问题
let currentCount = parseInt(localStorage.getItem("currentCount")) || 11;
favoritesCount.textContent = currentCount;

// 页面加载恢复按钮状态
buttons.forEach(elem => {
  const btnUniqueId = elem.dataset.id;
  const savedState = localStorage.getItem(`favBtn_${btnUniqueId}`);
  
  if (savedState === "В избранном") {
    elem.textContent = savedState;
    elem.classList.remove("button-blue");
    elem.classList.add("card-favorites-selected-button");
  } else {
    elem.textContent = "В избранное";
    elem.classList.add("button-blue");
    elem.classList.remove("card-favorites-selected-button");
  }
});

buttons.forEach(elem => {
  elem.addEventListener("click", () => {
    const btnUniqueId = elem.dataset.id;
    const isAdding = elem.textContent === "В избранное";
    
    if (isAdding) {
      elem.textContent = "В избранном";
      currentCount++;
      localStorage.setItem(`favBtn_${btnUniqueId}`, "В избранном");
    } else {
      elem.textContent = "В избранное";
      currentCount--;
      localStorage.setItem(`favBtn_${btnUniqueId}`, "В избранное");
    }
    
    elem.classList.toggle("button-blue");
    elem.classList.toggle("card-favorites-selected-button");
    favoritesCount.textContent = currentCount;
    localStorage.setItem("currentCount", currentCount.toString());
  });
});

方案二：用数组存储选中按钮标识，高效维护状态 #

1. 用数组存储所有选中状态的按钮唯一标识，避免重复存储文本内容
2. 页面加载时，通过判断按钮标识是否在数组中恢复对应状态
3. 点击按钮时，添加/移除标识到数组，计数直接由数组长度决定，避免计数与实际选中数量不一致

修改后的代码：

const buttons = document.querySelectorAll(".cardButton");
let favoritesCount = document.getElementById("favCount");
// 读取存储的选中按钮ID数组，默认空数组
let selectedBtnIds = JSON.parse(localStorage.getItem("selectedFavBtns")) || [];
// 计数直接用数组长度，确保与实际选中状态一致
let currentCount = selectedBtnIds.length || 11;
favoritesCount.textContent = currentCount;

// 页面加载恢复状态
buttons.forEach(elem => {
  const btnUniqueId = elem.dataset.id;
  const isSelected = selectedBtnIds.includes(btnUniqueId);
  
  if (isSelected) {
    elem.textContent = "В избранном";
    elem.classList.remove("button-blue");
    elem.classList.add("card-favorites-selected-button");
  } else {
    elem.textContent = "В избранное";
    elem.classList.add("button-blue");
    elem.classList.remove("card-favorites-selected-button");
  }
});

buttons.forEach(elem => {
  elem.addEventListener("click", () => {
    const btnUniqueId = elem.dataset.id;
    const isSelected = selectedBtnIds.includes(btnUniqueId);
    
    if (!isSelected) {
      // 添加到收藏
      elem.textContent = "В избранном";
      selectedBtnIds.push(btnUniqueId);
      currentCount++;
    } else {
      // 取消收藏
      elem.textContent = "В избранное";
      selectedBtnIds = selectedBtnIds.filter(id => id !== btnUniqueId);
      currentCount--;
    }
    
    elem.classList.toggle("button-blue");
    elem.classList.toggle("card-favorites-selected-button");
    favoritesCount.textContent = currentCount;
    // 数组转JSON字符串存储
    localStorage.setItem("selectedFavBtns", JSON.stringify(selectedBtnIds));
    localStorage.setItem("currentCount", currentCount.toString());
  });
});

方案三：关联业务数据标识（推荐，适用于按钮对应具体业务项） #

如果按钮对应商品、文章等业务数据，可直接用业务数据ID作为按钮标识（如data-item-id="1001"），状态存储更贴合业务逻辑，即使DOM结构变化，只要业务ID不变，状态就能正确恢复。实现逻辑与方案一/二一致，仅需将data-id替换为业务相关标识即可。

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